如何以純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?