本节内容：
CSS让文本显示省略号的实现方法。
首先，用一个div装起要调试的内容,并为这个div定义一个宽度。
css代码：
复制代码 代码示例:
div{width:200px;}
html代码：
复制代码 代码示例:
<div>
<span>CSS Web Design</span>
</div>
在IE中实现很简单，CSS 如下：
复制代码 代码示例:
span {
display:block;
width:200px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
但在FF中用上面的样式是无法实现的，因为text-overflow: ellipsis;是IE中特有的(非CSS标准)。
现在在FF下看到的仅仅只是把溢出的内容切除了，说到"溢出切除"，在FF中实现就要用到非常规的方法，一个标签作切除内容，再加一个标签作填补省略号用，并且加起来的
长度就能超过容器的宽度，本例指的就是DIV的宽度200px，实现的想法就是这样。
关于切除内容，这个已经基本上解决了，那就来说补省略号，不用JS，用CSS实现的话就要用到伪对象after。
先从HTML下手，为span标签外再加一层p标签（当然你也可以加其它标签的）
html代码：
复制代码 代码示例:
<div>
<p><span>CSS Web Design 我爱CSS-Web标准化 Div+
css教程</span><p>
</div>
再为这个P标签加样式。
复制代码 代码示例:
CSS：
p:after{
content:"...";
}
这样还是不行的，因为省略号是有宽度的，这样省略号就跳到一下行了。
接下来需要让让span 加省略号的宽度不大于容器宽度(准确的说是相等)，并且让省略号紧跟内容的内容。
解决上面这些问题的css样式：
复制代码 代码示例:
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}
补充：p span 的宽度用了"max-width"这个属性，IE不能解释该属性，而FF可以，哪些便避开了IE对SPAN宽度的重新应用。
归纳如下：
html代码：
复制代码 代码示例:
<div>
<p><span>CSS Web Design</span><p>
</div>
css代码：
复制代码 代码示例:
div{
width:200px;/*容器的基本定义*/
height:200px;
background-color:#eee;
}
/* IE下的样式 */
p span{
display: block;
width:200px;/*对宽度的定义,根据情况修改*/
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}/* FF 下的样式 */
p{clear:both;}
p span{float:left;
max-width:175px;
}
p:after{
content:"...";
}
如此操作之后，便可以给长文本添加上省略号了，大家可以自己准备几段文本测试下，看看效果如何？!
