用CSS控制文字段落的行數

當文章太長時,一般都有對應處理的方式,像是WordPress本身就有提供「摘要」的欄位可以填寫,有的外掛、頁面編輯器甚至還能自由的設定字數,或自行抓取文章第一段。

當然,也可以自己用CSS來處理,處理的方式也不在少數,今天來介紹一個方式,透過簡單的一些屬性就可以做到根據寬度來限制行數,多餘的則會以「 … 」來替代。

 

.text_block {
display: -webkit-box;
-webkit-box-orient: vertical;
white-space: normal;
-webkit-line-clamp: 2; //限制文字區塊行數
overflow: hidden;
}

 

如果沒有限制區塊的寬度,記得要補上。