HTML中超出文本使用省略号替代的CSS编写方式

在进行网站建设的过程中,我们常常会用到一种在HTML文章结构中使用的效果,那就是按照限定宽度显示文本,而超出的文本以省略号代替。

这种布局的好处在于限定文本宽度,不影响整体文档结构。

具体实现后的效果可以参看佚站互联底部文章分类的效果,如下图所示:

 

 

其实该效果的实现非常容易,只需要简单的几行代码就能实现,而且兼容各类浏览器。
代码如下,希望对于正在找寻该效果的朋友有所帮助。
 
使用你想要将其进行截取省略的元素,我们这里为a元素: 
 ul li a {     display: block;     /*定义显示形式*/     overflow: hidden;      /*截取超出字符*/     text-overflow: ellipsis;     /*超出字符以…代替*/     white-space: nowrap;     /*确定超出宽度字符不换行*/
 
大功告成!
若有任何疑问或者其他想法,欢迎在博文留言提出。