首页 咨询中心 IT学堂
CSS文字缩略大 文字超出变省略号超出某个DIV的文字自动省略显示省略号

 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并为其自动添加了“…”省略号,很实用吧?

网站建设专业网站建设http://www.web258.cn

上一篇 PHP环境配置是什么及如何配置PHP环境
上一篇 php内存限制(memory_limit)修改的方法
本方链接: http://www.web258.cn/article/show/i1393.html
ARTICLE 相关推荐