CSS 限制內容字數寬度或行數，超過顯示刪節號...

CSS 限制內容字數寬度或行數，超過顯示刪節號…

簡單記錄透過 CSS 來限制字數寬度或行數做法，可以將長篇的文章進行截斷，並且結尾以點點點方式呈現

在版面需要對其實，是相當好用的方式。

限制最大寬度

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 479px;

限制最多兩行：

    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;

針對以上做法，做一個簡單說明：

overflow:hidden; 是將超過的部分進行隱藏

text-overflow: ellipsis; 則是在被 overflow的內容加上刪節號(…)，在 Chrome 及 IE 都可以顯示出刪節號… （Firefox 可能僅會產生截斷，不會有刪節號…出現）

webkit-line-clamp: 可以限制內容行數

max-width則設定最大寬度