CSS在布局的时候,会考虑到网页整体效果,会把超出某个DIV的文字自动省略,显示省略号,倘若不用CSS,那就需要用服务器端动态脚本来截取文字来实现了。杀鸡还是不要用牛刀,能在客户端实现的就不要交给服务器了。费话不多说了,本篇 CSS教程向你演示如何自动缩略超出的文字,变成省略号。先来看CSS定义部分的代码:
view sourceprint?
<style type="text/css">
.divout {
display: inline-block;
white-space: nowrap;
word-wrap: normal;
width: 100%;
overflow: hidden;
-ms-text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-webkit-text-overflow: ellipsis;
text-overflow: ellipsis;
}
</style>
HTML测试代码部分:
view sourceprint?
1 <div class="divout" style="width:100px;">
2 上联网络为您提供精品的网页特效、网页教程,网站建设,网站制作,网页设计,还有面向初学者的各类编程代码,助您早日成功。
3 </div>
运行结果如下:
上联网络…
这样就把超出部分的文字自动隐藏了,CSS并为其自动添加了“…”省略号,很实用吧?