用CSS處理(截斷)過長的文字

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

擷取文章標題長度為26個字的結果是長度不一

使用CSS來控制文字是以容器的寬度為主，所以顯示的字數不一定相同但卻總是填滿容器寬度，而且不管是單行或多行，中文或英文都能控制自如:

<pre>
/* 單行文字縮略 */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.text-truncates {
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    height: 150%;
    overflow: hidden;
}

/* 2行文字縮略 */
.text-truncate2 {
    -webkit-line-clamp: 2;
}
/* 3行文字縮略 */
.text-truncate3 {
    -webkit-line-clamp: 3;
}
</pre>
將上列代碼加入CSS中，單行文字縮略使用 class="text-truncate"，2行文字縮略使用 class="text-truncates text-truncate2"，3行文字縮略使用 class="text-truncates text-truncate3"，就是那麼簡單..
<pre>
&lt;div class="info">
    &lt;div class="text-truncate">
        &lt;a href="{$article.url}" title="{$article.title|escape:html} {$article.add_time}" class="d-block">
            &lt;i class="fas fa-book-reader">&lt;/i> {$article.short_title}
        &lt;/a>
    &lt;/div>
    &lt;div class="text-truncates text-truncate3">
        {insert name="GetImageSrc" id=$article.id type="content" limit=200}
    &lt;/div>
&lt;/div>
</pre>