<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文本超出后显示省略号...</title>
<style type="text/css">
ul li{list-style-type: none;}
a{color: #000000;text-decoration: none;}
a:hover{color: #999999;}
li {
width:200px;
white-space:nowrap; /*强制在同一行内显示所有文本，合并文本间的多余空白，直到文本结束或者遭遇br对象。 */
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
-webkit-text-overflow:ellipsis;
-moz-text-overflow:ellipsis;
overflow: hidden;
}
/* firefox only wtf is? pls let me know*/
li:not(li) {
clear: both;
}
li:not(li) a {
max-width: 175px;
float: left;
}
li:not(li):after {
content: "...";
float: left;
width: 25px;
padding-left: 5px;
color: #df3a0e;
}
</style>
</head>
<body>
<div class="nwes">
<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>
<li><a href="">这里是新闻标题，今天晚上会下雨</a></li>
</ul>
</div>
</body>
</html>
原文：http://www.cnblogs.com/xf-note/p/4967748.html