您的位置：首页 > Web前端 > CSS

CSS 文字超出长度的显示省略号的方法总结

2013-05-16 11:08 841 查看

text-overflow







text-overflow

语法：

text-overflow ： clip | ellipsis

取值：

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

说明：

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。

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

例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>text-overflow</title>
</head>
<body>
<style type="text/css">
.div_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:100px; }
.div_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:100px; }

.fffd{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; otextoverflow: ellipsis;width: 30px; }
</style>

<!-- div_clip -->
<div class="div_clip">fsssssssssssssssssdfffff</div>

<!-- div_ellipsis -->
<div class="div_ellipsis">fsssssssssssssssssdfffff</div>

<!-- table -->
<table width=120px border=1 style="table-layout:fixed">
<tr>
<td class="fffd">ffffffffffffffffffffffffffffsssssssssss</td>
</tr>
</table>
</body>
</html>
说明： 以下3 个属性要一起设置，并且要给容器设置宽度，如果是表格的话要将布局方式改为table-layout:fixed。
verflow: hidden; text-overflow:ellipsis; white-space:nowrap;

本文出自 “随” 博客，请务必保留此出处http://guangge.blog.51cto.com/6224757/1201574
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航