可點選QR code
文章專區
網頁設計相關文章
用CSS讓過長文字自動以「…」呈現
在網頁設計上，為了讓版面更整齊，時常需要讓文字限制在固定尺寸的區塊內，
當文字超過設定的框架時會自動顯示「…」的刪節號。而使用CSS便可以達到這個效果。
方法便是在文字區塊內加上text-overflow: ellipsis; 、white-space: nowrap; 及 overflow:hidden;
如下範例：
然而可以發現的是，如此一來僅能顯示單行文字，若是需要顯示多行文字的話便不實用了。
不過CSS還有另一項新的屬性：-webkit-line-clamp，不僅可顯示多行文字，還可以控制要顯示的行數，超出的部分一樣會顯示「…」的符號。用法為設定要顯示的行數，例如要顯示三行便設定-webkit-line-clamp: 3
要配合的屬性包含：
display: -webkit-box;以及 -webkit-box-orient: vertical; text-overflow:hidden;
範例：
缺點是此項屬性兼容性不佳，目前僅支援有webkit的瀏覽器，如：chrome、Safari、Opera，並不支援IE和firefox。
