我们在制作网站的过程中，经常会遇到 如 新闻标题过长但我们又不想让标题换行的情况，那么我们就会用到一个常用的属性：text-overflow来单行裁剪文本；
w3school上是这样说明的：
我在第一次使用这个属性的时候是无效的，属性值写clip、ellipsis都没有任何效果，感觉很苦恼，后来查阅资料以及实践后，我得出要使用text-overflow 来实现单行文本裁剪的话要满足以下3个条件：
1.display: block; 元素须为块级元素，inline-block都不行，所以span或者a里的文本如果想要单行裁剪就需要设置display:block; p则不需要；
2.white-space: nowrap; 规定文本不会换行，文本会在在同一行上继续。这是想要实现单行文本裁剪的必要条件，但这个属性可以被
标签打破；
3.overflow: hidden; 想要裁剪文本实质就是把多余的部分隐藏掉，所以这也是必须属性。
那么，满足以上3个条件之后我们就可以使text-overflow生效了，我们一般是给ellipsis把多余部分裁剪为...的省略号，裁剪位置为元素宽度，所以当元素宽度等于浏览器宽度的时候且文本足够多就会随浏览器宽度而裁剪;
使用情境经常是我们虽然看到的是一个省略的标题，而我们又希望查看完整的标题，这在w3school上有例子，为了不愿意再去查的同学我就写在下面了：
在给元素设置以上属性之后，只需要写如下hover伪类即可实现鼠标放到元素上即查看完整文本的效果
div:hover{
text-overflow:inherit;
overflow:visible;
}
