text-overflow实现文字超出宽度，溢出后自动显示为省略号的效果

text-overflow是CSS中一个特殊的样式属性

它具有两个值：text-overflow : clip | ellipsis

clip : 不显示省略标记（...），而是简单的裁剪
ellipsis : 当对象内文本溢出时显示省略标记（...）

 

当列表一行中显示的文字超过固定宽度里，我们想只显示一行，多余的用省略号来显示。就需要用到text-overflow:ellipsis了。

但是必须加上另外两个样式：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）

 

如果仅定义text-overflow:ellipsis; 不能实现省略号效果。
同理：仅定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果