标签：
我们在制作网站的过程中，经常会遇到 如 新闻标题过长但我们又不想让标题换行的情况，那么我们就会用到一个常用的属性：text-overflow 来单行裁剪文本；
w3school上是这样说明的：
我在第一次使用这个属性的时候是无效的，属性值写clip、ellipsis都没有任何效果，感觉很苦恼，后来查阅资料以及实践后，我得出要使用text-overflow 来实现单行文本裁剪的话要满足以下3个条件：
1.display: block; 元素须为块级元素，inline-block都不行，所以span或者a里的文本如果想要单行裁剪就需要设置display:block; p则不需要；
2.white-space: nowrap; 规定文本不会换行，文本会在在同一行上继续。这是想要实现单行文本裁剪的必要条件，但这个属性可以被<br>标签打破；
3.overflow: hidden; 想要裁剪文本实质就是把多余的部分隐藏掉，所以这也是必须属性。
那么，满足以上3个条件之后我们就可以使text-overflow生效了，我们一般是给ellipsis把多余部分裁剪为...的省略号，裁剪位置为元素宽度，所以当元素宽度等于浏览器宽度的时候且文本足够多就会随浏览器宽度而裁剪;
使用情境经常是我们虽然看到的是一个省略的标题，而我们又希望查看完整的标题，这在w3school上有例子，为了不愿意再去查的同学我就写在下面了：
在给元素设置以上属性之后，只需要写如下hover伪类即可实现鼠标放到元素上即查看完整文本的效果
div:hover{
text-overflow:inherit;
overflow:visible;
}
引申：
为什么 text-overflow 我们常用在单行文本裁剪，而w3school只是说明这个属性是用来修剪文本，而且我们还会遇到需要裁剪段落的情况：
其实这种情况多为后台限制编辑字数来实现，但是我们前端依然是可以实现的：
{ display: -webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:4;
}
//上述代码涉及到盒模型弹性布局，这里就不赘述讨论了，因为我还现在还没太明白 2333。
上述代码只有webkit 的浏览器支持，而且目前为止并不是规范的CSS属性，所以大家还是不要盲目使用。（测试过-o- / -moz- 前缀，O和火狐还是无效）
而 单行文本裁剪是可以放心使用的，且不用担心兼容性，我亲测到 IE7 都没问题。
以上是我对 text-overflow 属性的理解，欢迎大家讨论，共同学习。（另：代码大都是手打，如有差错，欢迎指出。还有是首次发博文，渣排版，请谅解）
标签：
原文地址：http://www.cnblogs.com/xiebin/p/5755073.html
