在实际的Web开发和web前端培训过程当中，经常需要将溢出容器边界的文本显示为省略号，其实这非常简单，设置几个CSS属性就可以达到效果，并且兼容各大浏览器，包括PC端和移动端。
1、容器必须固定宽度，单位可以是像素或百分比；
2、禁止容器内的文本换行；
3、将溢出的内容隐藏掉；
4、将溢出的内容替换为省略号。
只要记住以上四个步骤就很容易想起代码了，我自己就是这样去记的。
方法（此方法Firefox5.0尚不支持）：
#test{width:150px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
首先需设置将文本强制在一行内显示，然后将溢出的文本通过overflow:hidden截断，并以text-overflow:ellipsis方式将截断的文本显示为省略号。
想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训，尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习
上一篇: 前端培训之如何使文本溢出边界不换行强制在一行内显示
下一篇: Java培训如何使用命令行模式访问SVN服务器进行提交
