文章提供三种关于文章标题过长了，控制显示为略号方法，下面有三款css教程控制省略号方式显示（ie、ff）代码，后两款都兼容ie,firefox。
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}
/* ie下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellips教程is;
}/* ff 下的样式 */
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}
实例
<!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=gb2312" />
<title>css实现超过特定长度显示省略号的方法</title>
<style type="text/css">
ul {width:200px; margin:50px auto;}
li {width:200px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href="/htmldata/2007-10-16/1192526505.html">芭比娃娃色调照片，ps制作过程</a>
<li><a href="/htmldata/2007-10-11/1192115032.html">照片处理 ps轻松制作漂亮灿烂星空mm特效照</a>
<li><a href="/htmldata/2007-09-13/1189681483.html">photoshop教程简单打造画意效果的老照片美女特效</a>
<li><a href="/htmldata/2007-09-13/1189653291.html">照片处理 photoshop为照片添加真实阴影和光线离</a>
<li><a href="/htmldata/2007-08-31/1188554851.html">photoshop简单为照片绘制可爱个性心形图案</a>
<li><a href="/htmldata/2007-08-29/1188380812.html">flash教程：简单实现as绘制贝塞尔曲线</a>
</ul>
</body>
</html>
实例三
.ellipsis a{display: block;width: 300px;overflow: hidden;white-space: nowrap;-o-text-overflow: ellipsis;text-overflow: ellipsis;}
/* firefox only */
.ellipsis:not(p) {clear: both;}
.ellipsis:not(p) a {max-width: 300px;float: left;}
.ellipsis:not(p):after {content: "...";float: left;width: 25px;padding-left: 1px;}
<div class="ellipsis"><a href="">在被征服后的岁月里，蒂卡尔自己也走上侵略道路，在玛雅全境扩张它的势力范围。</a></div>
