从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍“如何实现ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏”,在日常操作中,相信很多人在如何实现ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何实现ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!
代码如下:
li{
display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
white-space:nowrap; //强制不换行
overflow:hidden; //自动隐藏文字
text-overflow: ellipsis; //文字隐藏后添加省略号
-o-text-overflow:ellipsis; //适用于opera浏览器
}
涉及关键属性的语法:
1、语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)
2、
语法:
overflow : visible | auto | hidden | scroll
参数:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条
3、
语法:
white-space : normal | pre | nowrap
参数:
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)
到此,关于“如何实现ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注创新互联网站,小编会继续努力为大家带来更多实用的文章!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图