程度:初學者
建立網頁時時常遇到以方格 (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