CSS3 text-overflow 屬性

CSS3 text-overflow 屬性的功能是用來修飾過常的字串,可以讓超出範圍的字串尾直接截斷或是變成點點點(...)這樣的表示,目前所有主流的瀏覽器最新版都支援 CSS3 text-overflow 屬性的效果。使用 CSS3 text-overflow 屬性的時候,也常搭配控制超出範圍字串的 overflow 屬性以及避免字串折行的 white-space 屬性。實際上就算不用 text-overflow 屬性,只使用 overflow 與 white-space 就足以讓多餘字串不會折行也不會顯示出來,不過 text-overflow 屬性還可以稍做修飾,將多餘的字串改用點點點(...)顯示,讓人知道後面還以其他內容被隱藏,傳統的網頁設計要做到這樣的效果,通常會在伺服器端的 PHP 就先處理過字串長度,有了 CSS3 text-overflow 屬性就可以省去很多工作。

CSS3 text-overflow 屬性語法
text-overflow: 設定值;
CSS3 text-overflow 屬性最常用的設定値就是 clipe 與 ellipsis,還有其他設定値一併整理於下表。

CSS3 text-overflow 屬性的值與效果
設定值說明
clipe將超出範圍的字串切斷。
ellipsis用點點點(...)來表示被切斷的字串。
字串使用設定的字串代表被切斷的字串。
initial將此屬性設為預設值。
inherit繼承自父層的屬性設定值。
CSS3 text-overflow 屬性實際範例
<meta charset="utf-8">
<style type="text/css">
#DIV1{
    width:365px;
    overflow:hidden;
    border:1px #666666 solid;
    white-space:nowrap;
    margin-bottom:5px;
}
#DIV2{
    width:365px;
    overflow:hidden;
    text-overflow:clip;
    border:1px #666666 solid;
    white-space:nowrap;
    margin-bottom:5px;
}
#DIV3{
    width:365px;
    overflow:hidden;
    text-overflow:ellipsis;
    border:1px #666666 solid;
    white-space:nowrap;
}
</style>
<div id="DIV1">這是一行 text-overflow 屬性的測試文字,請注意字串尾端的處理方式</div>
<div id="DIV2">這是一行 text-overflow 屬性的測試文字,請注意字串尾端的處理方式</div>
<div id="DIV3">這是一行 text-overflow 屬性的測試文字,請注意字串尾端的處理方式</div>
範例的呈現效果
這是一行 text-overflow 屬性的測試文字,請注意字串尾端的處理方式
這是一行 text-overflow 屬性的測試文字,請注意字串尾端的處理方式
這是一行 text-overflow 屬性的測試文字,請注意字串尾端的處理方式
範例中總共準備了三個寬為 365px 的 DIV 區塊,區塊內的文字長度都超過 365px,接著幾個基本的設定包含「overflow:hidden;」讓超出 DIV 寬度範圍的字串隱藏、「white-space:nowrap;」讓多餘的字串不要自動折行,最著要的就是本文的主角 text-overflow 準備登場,我們只在第二個 DIV 與第三個 DIV 使用 text-overflow 屬性,目的是要比較效果的差異。

我們從範例的呈現結果可以看出 DIV2 所使用的「text-overflow:clip;」的效果其實與 DIV1 的效果是一樣的,都是直接將多餘文字切斷而不做任何美化,而 DIV3 則使用了「text-overflow:ellipsis;」,所以字串尾端會有(...)的效果一直延續到 DIV 區塊的寬度範圍。

以上就是常見的 CSS3 text-overflow 屬性應用方式,特別是(...)的效果對於節省 PHP 的工作有很大幫助,如果要條列部份的搜尋結果或資料清單,可以省去 PHP 判斷字串長度的資源消耗,改用 text-overflow 屬性處理又快又有效率,版面美化也更容易。

更多文字處理
© Copyright wibibi.com 網頁設計教學百科 基礎的網頁設計規劃、資料庫與程式設計 Since 2012 Englsih version
PHP Smarty MySQL JQuery Apache W3C