如何以純CSS處理Div中過多的文字

程度:初學者

建立網頁時時常遇到以方格 (Grid) 形式顯示列表,但每個項目 (Item) 內容不盡相同,長短不一,容易導致方格顯示起來不齊整,故在顯示的時候有時就需要捨棄部份內容了。

但如果直接刪走顯示方格顯示範圍以外的內容,容易混淆使用者,以為內容已經完結,以⋯⋯表示內容尚未完結是個好方法。

曾經見過有其他網頁使用CSS 的 :after 偽元素( Pseudo Element ),都可以做到類似效果,但就難以檢查方格內的內容是否真的滿溢,故最後没有使用有關方法。

後來在 Stack Overflow 找到以純CSS方法做到同樣效果,而且十分出眾。

/* 如只以一行顯示 */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 100px; /* 長度 */

/* 如需多行顯示 */
overflow: hidden;
width: 100px; /* 長度 */
display: -webkit-box;
-webkit-line-clamp: 3; /* 顯示行數 */
-webkit-box-orient: vertical;

See the Pen 如何以純CSS處理Div中過多的文字 by Kevin Lau (@kirstencomhk) on CodePen.0

參考:how to add three dots to text when overflow in html?

Author Details
Sorry! The Author has not filled his profile.

Leave a Reply