文字過長溢出造成畫面不美觀，所以前端製作時，常會定義超過一行、兩行、三行或多行時後面出現…省略符，這時我們可以使用text-overflow: ellipsis 來實現這功能，以下直接提供 CSS，有需要的可以自取。
/* Limit text length to one lines */
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
/* Limit the Text line */
-webkit-line-clamp: 1;
}
/* Limit text length to two lines */
.ellipsis-multiple {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
/* Multi-line settings */
-webkit-line-clamp: 2;
height: 42px;
line-height: 20px;
}
單行省略
想要限制行數，我們主要會使用 text-overflow: ellipsis 來呈現省略符號， 用 -webkit-line-clamp 定義略符號要出現在哪一行，最後用 overflow: hidden; 將超出的部分遮住。
.ellipsis {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
/* Limit the Text line */
-webkit-line-clamp: 1;
}單行省略中，我們使用 white-space: nowrap; 讓文字變成一行，所以不用另外對區塊設定高度。
多行省略
再多行省略中，我們固定要加上 display: -webkit-box 與 -webkit-box-orient: vertical，並將 white-space: nowrap; 刪除注意，如下:
.ellipsis-multiple {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
這裡我們可以看到，多行省略中，我們設定顯示到第二行，所以在第二行後面有省略符號出現，不過超過的文案一樣顯示出來了，所以們們還需要加上 height 與 line-height
.ellipsis-multiple {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
/* Multi-line settings */
-webkit-line-clamp: 2;
height: 42px;
line-height: 20px;
}
多行省略的注意事項
這裡需要注意的是多行省略 height 與 line-height 需要根據【目前網站字型】進行調整，尤其在不同瀏覽器上預設的 line-height 都不同，這導致了使用上常常出現本該被遮住的文案，如下：
.ellipsis-multiple {
...
line-height: normal;
}
多行省略 – 建議設置參數
那該如何設置比較好呢? 個人建議可以採用以下規則:
- line-height 不要設 normal
- lien-height 不能小於 font-size，可以是 font-size 加 4~8px
- height 高度約等於 line-height x 2
font-size: 14px;
/* line-height = font-size + 4~8px */
line-height: 20px;
/* height ight = line-height x 2 */
height: 40px;
這樣設計出來，在視覺上就不會顯得壅擠，也比較不會出現第三行的上半部，但實際情況，還是要依所選字體做調整。
發表迴響