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 屬性實際範例

範例的呈現效果

這是一行 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 屬性處理又快又有效率，版面美化也更容易。

更多文字處理

CSS3 text-wrap 屬性
CSS vertical-align 屬性