有時候文章標題很長，或只想顯示一部份內容於特定頁面，例如首頁的簡介，雖然說程式語言(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>
