有時候文章標題很長,或只想顯示一部份內容於特定頁面,例如首頁的簡介,雖然說程式語言(ASP、PHP、JAVA...)可以擷取指定長度文字,但常因為中英文與字寬會有差異,造成相同字數卻顯示不同行數,這對排版來說是一個困擾...

擷取文章標題長度為26個字的結果是長度不一
使用CSS來控制文字是以容器的寬度為主,所以顯示的字數不一定相同但卻總是填滿容器寬度,而且不管是單行或多行,中文或英文都能控制自如:
/* 單行文字縮略 */ .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .text-truncates { word-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } /* 2行文字縮略 */ .text-truncate2 { -webkit-line-clamp: 2; height: 3rem; } /* 3行文字縮略 */ .text-truncate3 { -webkit-line-clamp: 3; height: 4.5rem; }將上列代碼加入CSS中,單行文字縮略使用 class="text-truncate",2行文字縮略使用 class="text-truncates text-truncate2",3行文字縮略使用 class="text-truncates text-truncate3",就是那麼簡單,例如ecshop的最新文章:
<div class="info"> <div class="text-truncate"> <a href="{$article.url}" class="d-block"> <i class="fas fa-book-reader"></i> {$article.short_title} </a> </div> <div class="text-truncates text-truncate3"> {insert name="GetImageSrc" id=$article.id type="content"} </div> </div>