前端时间有发现一些地方会出现文本超出显示省略号的地方，今天特地整理出来几种不同情况下的使用方法。
首先，我们来看第一种，也是最常见的
单行文本超出隐藏
.{
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
这个大家都会，基本上解决一些常见的问题，但是如果我们段落内容比较长，需要在第二行出现省略号、又或者在第三行出现呢。
｛
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: n;
overflow: hidden;
｝
* 这里有个小知识， 就是 设置 text-indent 时会导致文本超出的省略号无法正常展示，展示多少要根据缩进的大小而定。 比如按照中文的习惯 我们一般设置为 2em 此时 省略号将全部不显示， 如果有需要类似缩进的同学， 这里可以使用 pading-left 代替 text-indent
上面中的n 就是文本需要在哪一行省略的行数，值的一提的是，这种方式的多行省略，目前还仅仅属于webkit的私有属性，就是说只兼容webkit内核下的浏览器 不推荐使用。
第三种则是 在响应式布局下同行元素文本超出，为了不影响后面的内容正常显示 我们需要隐藏中间区域的超出文字
其实方法比较简单这里就文字阐述，不提供代码了
假设在同一个父级内 三个元素在同行显示 需要做到中间元素文本超出隐藏
1.给父级相对定位，左右的两个子元素分别定位到元素两侧；
2.父级元素两侧给足够的padding；
3.中间元素宽度设置为100%；在根据正常的单行文本超出隐藏即可。
注意： 在响应式布局中，可能还是需要根据不同的媒询来设置不同的padding值
拓展： 在兼容低版本的时候 需要给父级加 overflow: hidden; 可以兼容至 IE6