用css限制文字的行數

此文章已於 2024-11-26 更新

在文字編排的時候，我們都會區塊呈現文章列表，然後節錄出標題、摘要，通常有在注意字數的話是沒問題的。

如果字數不一樣就會讓整體視覺觀感沒那麼漂亮，這邊就提供一個可以將多餘內容隱藏並變為「…」的方式。

在要限制的文字內容是用下面css

.class{
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 5;
   overflow: hidden;
   text-overflow: ellipsis;
}