CSS3 text-overflow

text-overflow

针对溢出容器部分的文本，进行裁剪。

<!-- text-overflow 需要配合 overflow: hidden 使用 -->
<!-- text-overflow 有两个属性值 clip | ellipsis -->
<!-- 默认情况指定了 overflow: hidden 是使用了 text-overflow: clip 普通裁剪 -->
<!-- 而使用了 text-overflow: ellipsis 将会对被裁剪文本的尾部加上 ... 省略号 -->

<!-- 不裁剪 -->
<div style="width:100px;  white-space: nowrap; background: #eee;">～～～～～～～～～～～～~</div>

<!-- clip -->
<div style="width:100px;  white-space: nowrap; background: #eee; text-overflow: clip; overflow: hidden; ">～～～～～～～～～～～～~</div>

<!-- ellipsis -->
<div style="width:100px;  white-space: nowrap; background: #eee; text-overflow: ellipsis; overflow: hidden; ">～～～～～～～～～～～～~</div>

不裁剪

clip

ellipsis