你不知道的文本超出显示省略号的方法

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

 

首先，咱们来看第一种，也是最多见的

单行文本超出隐藏

.{

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

}

 

 

这个你们都会，基本上解决一些常见的问题，可是若是咱们段落内容比较长，须要在第二行出现省略号、又或者在第三行出现呢。

｛

display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: n;
overflow: hidden;

｝

上面中的n 就是文本须要在哪一行省略的行数，值的一提的是，这种方式的多行省略，目前还仅仅属于webkit的私有属性，就是说只兼容webkit内核下的浏览器  不推荐使用。

 

第三种则是 在响应式布局下同行元素文本超出，为了避免影响后面的内容正常显示 咱们须要隐藏中间区域的超出文字

其实方法比较简单这里就文字阐述，不提供代码了

假设在同一个父级内 三个元素在同行显示 须要作到中间元素文本超出隐藏

1.给父级相对定位，左右的两个子元素分别定位到元素两侧；

2.父级元素两侧给足够的padding；

3.中间元素宽度设置为100%；在根据正常的单行文本超出隐藏便可。

注意： 在响应式布局中，可能仍是须要根据不一样的媒询来设置不一样的padding值 

拓展：  在兼容低版本的时候 须要给父级加 overflow: hidden;  能够兼容至 IE6