~~~ 單行省略號 ① 初始狀態, 文字內容超過<div>寬度 所以會自動換行 ② 添加 white-space: nowrap; 讓內容在一行顯示，不換行，但是發生了文字溢出 ③ 添加 overflow: hidden; 讓內容的溢出部分隱藏。 ④ 添加 text-overflow: ellipsis; 如果溢出部分是文字，那么就讓溢出的前一個文字顯示省略號。 多行省略號 多行省略號只能支持 webkit 內核瀏覽器, IE系就不兼容，像京東這種大型互聯網電商網站，他們也是用了這種做法，IE系瀏覽器 京東選擇了放棄兼容, 只是顯示固定行數, 并沒有以省略號結尾 width: 150px; height: 32px; line-height: 16px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; border: 1px solid black; 代碼解釋: font-size: 文字大小 line-height: 文字一行所占高度 讓 line-height 比 font-size 大一點, 是為了兩行文字間有點間距, 不然看著太密集。 height: 是為了兼容IE系瀏覽器。因為 -webkit-line-clamp 在IE系瀏覽器無效, 所以無法控制顯 示幾行， 只能通過設置 div 高度, 然后讓溢出內容隱藏的方式來實現效果。 為了防止IE系瀏覽器隱藏溢出后, 最后一行只剩文字上半部的情況，建議 div 高度按照行高設置 height = line-height * 最多顯示的行數。 ~~~