文本溢出显示省略号，让文本只显示为一行

 这三个属性一起用，在不想截取文本又想全部输出的时候可以在文本溢出时显示省略号

<style>
.text{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
</style>

最初的页面如下，标题的文字长短不一 会让标题的高度不统一，所以要求只显示一行字，溢出部分显示省略号，综合以上三个属性达到最终显示效果——标题的高度统一，溢出隐藏。

下面分别验证三个属性，看看它们都是怎么影响最终结果的。

首先是 white-space:nowrap，让文字只显示为一行；

然后是overflow:hidden，让超出的文字隐藏起来；

 

最后是text-overflow:ellipsis，让超出的部分文字显示为省略号。

 

好记性不如烂笔头，光说不练假把式，看人家写多少次都是假的，还是自己做一遍实在，再把自己的思考写下来，说不定就会有新的体会。知识积累从点滴做起！