ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏

ttx9n · 发表于 2014-4-3 16:54:10

如何实现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属性（特性）

额呵呵 · 发表于 2022-8-29 21:45:57

。。。。。。。。。。。。。。。

回复用户1 · 发表于 2022-11-9 12:24:31

的谁vdvdsvdsvdsdsv

额呵呵 · 发表于 2023-1-18 01:21:10

你们谁看了弄洒了可能

醉梦娱乐网 · 发表于 2023-7-25 15:00:55

额风风风微风微风违法

醉梦娱乐网 · 发表于 2023-8-22 08:05:53

hi哦和烦恼农家女

81708585 · 发表于 2023-9-2 17:56:42

看看怎么样再说

5cf304mn2 · 发表于 2023-9-4 06:54:55

搞个免费的用用

a75620618 · 发表于 2024-3-9 23:45:21

啪啪啪生怕PSP怕

zzhxxx · 发表于 2024-4-5 18:00:37

管灌灌灌灌灌灌灌灌灌灌

账号		自动登录	找回密码
密码			立即注册

[CSS] ul li列表中显示文字强制不换行大于li宽度的文字自动隐藏

相关帖子