通过CSS来使元素中的文字超过了自己的宽度后用省略号来代替,主要涉及的CSS代码如下:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
对于一般的div及li元素用上面的CSS即可实现超过宽度显示省略号,但对于table元素中的td,只用上面的CSS还不行,还需给table加上下面的CSS:
table {
table-layout: fixed;
}
只有通过修改table的table-layout,使表格以固定表格布局,才能实现超过宽度显示省略号效果,不然表格中的td虽然没有换行,但表格会随着内容不断变宽。具体关于 CSS table-layout属性的解释,可以上W3school进行查询。
下面贴出一个测试的页面HTML代码:
<!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>
<title>纯CSS超过宽度显示省略号</title>
<style type="text/css">
ul {
width: 100px;
}
li {
width: 100px;
line-height: 25px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<ul>
<li><a href="#" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</a></li>
<li><a href="#" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</a></li>
<li><a href="#" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</a></li>
<li><a href="#" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</a></li>
</ul>
<br />
<table width="400px" border="1" bordercolor="#333333" cellpadding="0" cellspacing="0" bgcolor="#E8FFFF" style="table-layout:fixed">
<tr>
<td title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</td>
<td title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</td>
<td title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</td>
</tr>
</table>
<br />
<div style="white-space:nowrap;overflow: hidden;text-overflow: ellipsis; width:100px;" title="纯CSS超过宽度显示省略号">纯CSS超过宽度显示省略号</div>
</body>
</html>
测试使用浏览器:IE 6,IE 8,遨游3,Firefox 15.0
测试的HTML标签:<td>、<div>、<li>
在线演示DEMO