你不知道的文本超出顯示省略號的方法

前端時間有發現一些地方會出現文本超出顯示省略號的地方，今天特意整理出來幾種不一樣狀況下的使用方法。

 

首先，咱們來看第一種，也是最多見的

單行文本超出隱藏

.{

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