纯CSS超过宽度显示省略号

最新推荐文章于 2024-09-05 11:49:00 发布

weixin_34023982

最新推荐文章于 2024-09-05 11:49:00 发布

阅读量83

点赞数

文章标签： xhtml

原文链接：https://my.oschina.net/admyvi/blog/76968

版权

为什么80%的码农都做不了架构师？>>>

通过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

转载于:https://my.oschina.net/admyvi/blog/76968