單行省略號
用法：
為已有寬度的盒子添加屬性:
image.png
分析：
① 初始狀態(tài), 文字內(nèi)容超過<div>寬度 所以會自動換行
② 添加 white-space: nowrap; 讓內(nèi)容在一行顯示，不換行，但是發(fā)生了文字溢出
③ 添加 overflow: hidden; 讓內(nèi)容的溢出部分隱藏。
④ 添加 text-overflow: ellipsis; 如果溢出部分是文字，那么就讓溢出的前一個文字顯示省略號。
多行省略號
多行省略號只能支持 webkit 內(nèi)核瀏覽器, IE系就不兼容，像京東這種大型互聯(lián)網(wǎng)電商網(wǎng)站，他們也是用了這種做法，IE系瀏覽器 京東選擇了放棄兼容, 只是顯示固定行數(shù), 并沒有以省略號結(jié)尾。
用法：
為已有寬度的盒子添加屬性:
image.png
代碼：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 150px;
height: 32px;
font-size: 14px;
line-height: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
border: 1px solid black;
}
</style>
</head>
<body>
<div>CSS內(nèi)容超出部分顯示省略號，這個是多行文字內(nèi)容顯示省略號的情況</div>
</body>
</html>
代碼解釋:
font-size: 文字大小
line-height: 文字一行所占高度
讓 line-height 比 font-size 大一點, 是為了兩行文字間有點間距, 不然看著太密集。
height: 是為了兼容IE系瀏覽器。因為 -webkit-line-clamp 在IE系瀏覽器無效, 所以無法控制顯
示幾行， 只能通過設(shè)置 div 高度, 然后讓溢出內(nèi)容隱藏的方式來實現(xiàn)效果。
為了防止IE系瀏覽器隱藏溢出后, 最后一行只剩文字上半部的情況，建議 div 高度按照行高設(shè)置 height = line-height * 最多顯示的行數(shù)。
