CSS 隱藏文章標題過長部分

對於CMS來說，經常遇到的一個問題就是文章的標題有時候過長，需要我們隱藏多餘的部分，並以類似...的方式表示只顯示了部分文字。

那麼通常實現的辦法可以在動態調取文章標題時，使用substr函數：

<?php
    substr($post_title, 0, 55);
?>

當然，substr只針對於單字符文字，若是像中文這種多字符文字(multi-byte string)，我們需要使用

<?php
    mb_substr($post_title, 0, 55);
?>

否則將會出現亂碼。

那麼今天我們要來介紹一下怎麼利用純CSS來實現這樣的功能。

首先將我們的標題加上post-title這個class，然後添加以下CSS代碼：

.post-title {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

這樣就大功告成了！是不是超級簡單呢；）