在进行网站建设的过程中，我们常常会用到一种在HTML文章结构中使用的效果，那就是按照限定宽度显示文本，而超出的文本以省略号代替。
这种布局的好处在于限定文本宽度，不影响整体文档结构。
HTML中超出文本使用省略号替代的CSS编写方式
具体实现后的效果可以参看佚站互联底部文章分类的效果，如下图所示：
其实该效果的实现非常容易，只需要简单的几行代码就能实现，而且兼容各类浏览器。
代码如下，希望对于正在找寻该效果的朋友有所帮助。
使用你想要将其进行截取省略的元素，我们这里为a元素：
ul li a { display: block; /*定义显示形式*/ overflow: hidden; /*截取超出字符*/ text-overflow: ellipsis; /*超出字符以…代替*/ white-space: nowrap; /*确定超出宽度字符不换行*/} 大功告成！
若有任何疑问或者其他想法，欢迎在博文留言提出。
发表回复