關於網路那些事...

網路行銷,SEO,網路趨勢,教學文章,網頁設計,生活時事

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則設定最大寬度


如果這篇文章對你有幫助,請在這裡點個讚



最新文章推薦