CSS3：text-overflow實現文字截取，超出部分顯示省略號

1. 概述

使用text-overflow:ellipsis對溢出文本顯示省略號有兩個好處，

• 一是不用經過後端程序截取；
• 二是有利於SEO。

2. text-overflow的屬性

clip： 當對象內文本溢出時不顯示省略標記（…），而是將溢出的部分裁切掉。 以下圖： p ellipsis： 當對象內文本溢出時顯示省略標記（…），以下圖：

       

string：使用給定的字符串來表明被修剪的文本，目前絕大部分瀏覽器不支持

3. 完整示例

<style type="text/css">
p {
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    width:100%;
}
</style>
<p>牀前明月光，疑是地上霜。舉頭望明月，低頭思故鄉。</p>

以下圖：

1. white-space:nowrap; 規定段落中的文本不進行換行，不然溢出的文本就到了下一行了。
2. overflow:hidden; 隱藏超出範圍的文本，不然溢出的文本就正常顯示出來了。
3. width:100%; 主要針對IE6

4. 兼容性

到目前爲止，包括IE6+、Chrome、Firefox等主流瀏覽器都支持了該功能。