文章出處
文章列表
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>
如下圖：
- white-space:nowrap; 規定段落中的文本不進行換行，否則溢出的文本就到了下一行了。
- overflow:hidden; 隱藏超出范圍的文本，否則溢出的文本就正常顯示出來了。
- width:100%; 主要針對IE6
4. 兼容性
到目前為止，包括IE6+、Chrome、Firefox等主流瀏覽器都支持了該功能。
文章列表
全站熱搜
留言列表
