css 文字溢出省略号样式代码

时间：2022-06-25 09:36:29 编辑：袖梨来源：一聚教程网

例，原本以为文字溢出的处理比较复杂，没想到这么一简简单单的一句话就搞定了，css真是神奇：

代码如下	复制代码
.li { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }

这只是使用了CSS中text-overflow属性，这个属性比较特殊，在现在的CSS手册中找不到，但CSS3中有相关的描述：text-overflow-mode。

它有三个值：clip、ellipsis、ellipsis-word。

clip : 不显示省略标记（…），只是简单的裁切；
ellipsis : 当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

text-overflow比较特殊，它不能单独起作用，而是必须跟在overflow:hidden后面作为补充说明使用。如果我们要给一个段落添加这个效果，那么可以写：

代码如下	复制代码
p { white-space: nowrap; width: 100%; /* IE6 需要定义宽度 / overflow: hidden; -o-text-overflow: ellipsis; / Opera / text-overflow: ellipsis; / IE, Safari (WebKit) */ }

firefox7.0开始兼容text-overflow:ellipsis;这样的话，以后的省略号就可以做到浏览器兼容了，代码片段为：

/*设置宽度*/
white-space:nowrap;/*设置不折行*/
text-overflow:ellipsis;/*这就是省略号喽*/
-o-text-overflow:ellipsis;/*兼容opera*/
overflow: hidden;/*设置超过的隐藏*/

一个实例

代码如下

复制代码

[html]

div中溢出文字用点代替的代码

查阅了下，属性如下：

white-space：nowrap;表示文本不会换行，在同一行继续，知道遇到
标签为止；

overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；

text-overflow：ellipsis;当文本对象溢出是显示...，当然也可是设置属性为clip不显示点点点；