你不知道的文本超出显示省略号的方法（ 文本超出省略号失效。。。 ）

前端时间有发现一些地方会出现文本超出显示省略号的地方，今天特地整理出来几种不同情况下的使用方法。

 

首先，我们来看第一种，也是最常见的

单行文本超出隐藏

.{

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