CSS3属性text-overflow

最新推荐文章于 2024-04-17 01:32:59 发布

wzy_3463

最新推荐文章于 2024-04-17 01:32:59 发布

阅读量632

点赞数

本文链接：https://blog.csdn.net/wzy_3463/article/details/9159965

版权

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>

wzy_3463

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3属性text-overflow

text-overflow ： clip | ellipsis取值：clip：不显示省略标记（...），而是简单的裁切。ellipsis：当对象内文本溢出时显示省略标记（...）说明：设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式
复制链接

扫一扫