CSS3属性text-overflow

来源：互联网发布：android编程200例 pdf 编辑：程序博客网时间：2024/06/12 05:38

text-overflow ： clip | ellipsis

取值：

clip：: 不显示省略标记（...），而是简单的裁切。
ellipsis：: 当对象内文本溢出时显示省略标记（...）

说明：

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden），只有这样才能实现溢出文本显示省略号的效果。

兼容性：text-overflow : clip

text-overflow : ellipsis

从上面的表中我们可以看出，Firefox对text-overflow:ellipsis 这一属性支持不是很好。

下面附上一个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>新建文档</title> <style> * { margin: 0; padding: 0; } a { text-decoration: none; color: #000; } a:hover { text-decoration: none; color: #000; } ul { width: 300px; margin: 40px auto; padding: 12px 4px 12px 24px; border: 1px solid #D4D4D4; background: #F1F1F1; list-style: none;} li { margin: 12px 0; } li a { display: block; width: 80px; overflow: hidden;/*注意不要写在最后了*/ white-space: nowrap; -o-text-overflow: ellipsis; text-overflow: ellipsis; } /* firefox only */ li:not(p) { clear: both; } li:not(p) a { max-width: 170px; float: left; } li:not(p):after { content: "..."; float: left; width: 25px; padding-left: 5px; color: #000; } </style> </head> <body> <ul> <li><a href="#">网页设计网页设计网页设计</a></li> <li><a href="#">网页设计网页设计网页设计</a></li> <li><a href="#">网页设计网页设计网页设计</a></li> <li><a href="#">网页设计网页设计网页设计</a></li> <li><a href="#">网页设计网页设计网页设计</a></li> <li><a href="#">网页设计网页设计网页设计</a></li> <li><a href="#">网页设计网页设计网页设计</a></li> <li><a href="#">网页设计网页设计网页设计</a></li> <li><a href="#">网页设计网页设计网页设计</a></li> </ul> </body> </html>