作者:
WangMin
格言:努力做好自己喜歡的每一件事
我們在項目開發的過程中也許都遇到過這樣的問題：我們需要實現這樣一個需求，在一個父級元素中隱藏一個可能過長的文本。而這個需求可以分解為兩個，一個是單行溢出省略，一個是多行溢出省略。下面我們就開始一起學習吧！
實現文本超出顯示省略號的常見屬性
1）overflow: hidden
這里我們需要注意到一點：這里的overflow並不是設置為父級元素div的屬性，而是給需要文本省略的標簽的屬性，需要和overflow的普通用法區分開來。
- overflow：hidden的普通用法：用在塊級元素（例如div）的外層隱藏溢出的內部元素。
2）text-overflow: clip / ellipsis;
這一屬性依賴於overflow: hidden存在，只有設置了overflow:hidden它才是能夠生效的，你可以把它看作overflow對於文本溢出隱藏的一種特殊表現樣式。
clip：當元素內文本溢出時不顯示省略標記（…），而是將溢出的部分裁切掉，默認值。
ellipsis：當元素內文本溢出時顯示省略標記（…）。
注意：使用ellipsis時，必須配合overflow:hidden;white-space:nowrap;width:具體值；這三個樣式共同使用才會有效果。
3）white-space: nowrap
它的作用是讓文本不換行，這是overflow:hidden和text-overflow：ellipsis生效的基礎！沒有它overflow:hidden和text-overflow：ellipsis無法生效！（只適用於單行文本溢出省略）
4）-webkit-line-clamp: 數值（表示顯示多少行）；
用來限制在一個塊元素顯示的文本的行數，例如 -webkit-line-clamp: 2 表示最多顯示 2 行。這個屬性只合適WebKit瀏覽器或移動端（絕大部分是WebKit內核的）瀏覽器。 為了實現該效果，它需要組合其他的WebKit屬性。（適用於多行文本溢出省略）
5）display: -webkit-box；（和 -webkit-line-clamp: 2；結合使用，將對象作為彈性伸縮盒子模型顯示 ）（適用於多行文本溢出省略）
6）-webkit-box-orient: vertical；（和 -webkit-line-clamp: 2；結合使用 ，設置或檢索伸縮盒對象的子元素的排列方式 ）（適用於多行文本溢出省略）
單行文本溢出的省略
需要在文本容器上設置overflow: hidden；white-space: nowrap；text-overflow: ellipsis這幾個屬性，還要給文本容器設置寬度（例如 width：200px）使overflow: hidden；生效，才能實現單行文本溢出的省略。代碼與效果如下：
<p>
這里我們需要注意到一點：這里的overflow並不是設置為父級元素div的屬性，
而是給==需要文本省略的標簽==的屬性，需要和overflow的普通用法區分開來。
</p>
p{
width:300px; /*限制元素寬度*/
line-height: 30px;
border:1px solid #ccc;
overflow: hidden; /*文本超出隱藏*/
text-overflow: ellipsis; /*文本超出顯示省略號*/
white-space: nowrap; /*超出的空白區域不換行*/
}
優點：
- 兼容性好，對各大主流瀏覽器有好的支持
- 響應式截斷，根據不同寬度做出調整
- 文本溢出范圍才顯示省略號，否則不顯示省略號
- 省略號位置顯示剛好
多行文本溢出的省略
從上面可以得到文本溢出我們經常用到的應該就是 text-overflow:ellipsis 與 overflow: hidden 了，但是對於多行文本的溢出處理確接觸的不是很多。那么這里呢，就要給大家介紹一個屬性 line-clamp ,但這個屬性的兼用性差，只有 WebKit 內核的瀏覽器才支持，所以需要在屬性前面加上 -webkit- 。-webkit-line-clamp的含義上面也已經提到了，它是用來限制在一個塊元素顯示的文本的行數。 為了實現這個效果，它需要組合上面提到的其他的WebKit屬性：
- display: -webkit-box 將對象作為彈性伸縮盒子模型顯示；
- -webkit-box-orient 設置或檢索伸縮盒對象的子元素的排列方式；
- text-overflow: ellipsis 用省略號“…”隱藏超出范圍的文本。
代碼與效果如下：
<p>
這里我們需要注意到一點：這里的overflow並不是設置為父級元素div的屬性，
而是給==需要文本省略的標簽==的屬性，需要和overflow的普通用法區分開來。
</p>
p{
width:300px; /*限制元素寬度*/
line-height: 30px;
border:1px solid #ccc;
overflow: hidden; /*文本超出隱藏*/
display:-webkit-box; /*盒子模型微彈性伸縮模型*/
-webkit-box-orient: vertical;/*伸縮盒子的子元素垂直排列*/
-webkit-line-clamp: 3; /*文本顯示3行*/
}
[ 注意 ]
1、四行CSS缺一不可！
2、因為這是webkit的CSS屬性擴展，所以兼容瀏覽器范圍是PC端的webkit內核的瀏覽。器：chrome/safari/QQ瀏覽器/360/獵豹等以及絕大多數的移動端瀏覽器。
以下是-webkit-line-clamp在各個瀏覽器的兼容：
多行文本省略的其他方式：
目前沒有什么CSS的屬性可以直接控制多行文本的省略顯示，比較靠譜的辦法應該就是利用相對定位在最后面加上一個省略號了，代碼參考如下：
<p>
這里我們需要注意到一點：這里的overflow並不是設置為父級元素div的屬性，
而是給==需要文本省略的標簽==的屬性，需要和overflow的普通用法區分開來。
</p>
p{
width:300px; /*限制元素寬度*/
height: 60px; /* 高度為需要顯示的行數*行高，比如這里我們顯示兩行，就是30 * 2，則為60px */
line-height:30px;
position: relative;
line-height: 30px;
border:1px solid #ccc;
overflow: hidden; /*文本超出隱藏*/
}
p:after {
content:"...";
position:absolute;
bottom:0;
right:0;
padding: 0 5px;
background-color: #fff;
}
文本中如果有英文，希望讓一個單詞能夠在換行時進行拆分，我們可以添加 word-break: break-all; 代碼效果如下：
p{
width:300px; /*限制元素寬度*/
height: 60px; /* 高度為需要顯示的行數*行高，比如這里我們顯示兩行，就是30 * 2，則為60px */
line-height:30px;
word-break: break-all; /*如果文本中有英文，可以使一個單詞能夠在換行時進行拆分*/
position: relative;
line-height: 30px;
border:1px solid #ccc;
overflow: hidden; /*文本超出隱藏*/
}
不過這樣有時候會讓整個單詞顯示不完整，根據自己的需求來使用這個屬性。
利用第二種的多行文本省略方式會有一點問題：
- 無法識別文字的長短，無論文本是否溢出范圍，一直顯示省略號省略號。
- 顯示可能不會剛剛好，有時會遮住一半文字，跟文字沒有貼合的很緊密。這里'屬'就被遮住了一部分。
- 需要知道顯示的行數並設置行高才行。
- IE6/7不支持after和content，需要添加一個標簽來代替。
- 省略號的背景顏色跟文本背景顏色一樣，並且可能會遮住部分文字，建議可以使用漸變的png背景圖片代替。
以上僅是個人見解，若有不足之處歡迎在下方評論指出，那就先分享到這里!! 😄 后續繼續更新!!