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宽度的文字自动隐藏到此结束。学习是苦根上长出来的甜果。小编再次感谢大家对我们的支持!

您可能有感兴趣的文章
修改UL和LI间隔的简单方法

ul li内容宽度的问题的如何解决方案

ul设置列表为一行2条的方法

ul和li如何实现分两列(多列)布局显示

UL里的LI元素左浮动层一行显示时使其居中的方法