溢出文本自动带省略号省略(text-overflow: ellipsis;)的方法

使用text:overflow: ellipsis;的样式可以将溢出的文本自动裁剪，同时将裁剪部分标注省略号。使用方法如下：

<style> div { width: 200px; background: lightgray; white-space: nowrap; //强制设置元素内文本不换行 overflow: hidden; //溢出文本隐藏（不隐藏，就谈不上省略） text-overflow: ellipsis; } </style>

<div>这里是一些文本，这里是一些文本，这里是一些文本，这里是一些文本，
这里是一些文本，这里是一些文本，这里是一些文本，这里是一些文本。</div>

执行结果：

需要注意的是，如果想要text-overflow: ellipsis;发生作用，必须同时指定元素的white-space和overflow样式，其中white-space规定文本不换行（nowrap），overflow规定溢出的部分隐藏（hidden），如果这两个样式任何一个缺失，都不会产生省略号效果。

text-overflow的默认值是clip，即切断文本但并不增加省略号。