css小经验： 转载 - CSS文本溢出省略号：text-overflow:ellipsis
（轉(zhuǎn)載： http://blog.163.com/yinwei_666/blog/static/2036157320101113102733794/）
?
很多時(shí)候，比如網(wǎng)站最基本的文章列表，標(biāo)題會(huì)很長(zhǎng)，而顯示列表的區(qū)域?qū)挾葏s沒(méi)有這么寬，這時(shí)候最正常的做法就是讓超出寬度的部分文字用省略號(hào)(…)來(lái)表示。通常做法是網(wǎng)站后臺(tái)程序截取。
這個(gè)標(biāo)題其實(shí)已經(jīng)是一個(gè)老生常談的問(wèn)題了。很多時(shí)候，比如網(wǎng)站最基本的文章列表，標(biāo)題會(huì)很長(zhǎng)，而顯示列表的區(qū)域?qū)挾葏s沒(méi)有這么寬，這時(shí)候最正常的做法就是讓超出寬度的部分文字用省略號(hào)(…)來(lái)表示。通常做法是網(wǎng)站后臺(tái)程序截取一定的字符然后輸出到前臺(tái)顯示或者前臺(tái)用javascript截取一定的字符，但是通過(guò)控制字?jǐn)?shù)來(lái)截取的話還是存在一個(gè)大問(wèn)題的，因?yàn)橹形暮陀⑽牡淖址麑挾葐?wèn)題，這個(gè)字?jǐn)?shù)不好控制，而且通用性較差。那么有沒(méi)有更好的方法呢，比如直接用CSS來(lái)解決的，當(dāng)然是有的。
text-overflow是一個(gè)比較特殊的屬性，W3C早前的文檔中（目前的文檔中沒(méi)有包含text-overflow屬性，FML!）對(duì)其的定義是:
Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word?
clip : 不顯示省略標(biāo)記（…），而是簡(jiǎn)單的裁切
ellipsis : 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…），省略標(biāo)記插入的位置是最后一個(gè)字符。
ellipsis-word : 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（…），省略標(biāo)記插入的位置是最后一個(gè)詞（word）。
?至于為什么一開(kāi)始我說(shuō)text-overflow是一個(gè)比較特殊的樣式呢？因?yàn)槲覀兛梢杂盟嫖覀兺ǔＫ玫臉?biāo)題截取函數(shù)，而且這樣做對(duì)搜索引擎更加友好，如：標(biāo)題文件有50個(gè)漢字，而我們的列表可能只有300px的寬度。如果用標(biāo)題截取函數(shù)，則標(biāo)題不是完整的，如果我們用CSS樣式text-overflow:ellipsis，輸出的標(biāo)題是完整的，只是受容器大小的局限不顯示出來(lái)罷了（表現(xiàn)上是超出部分顯示省略標(biāo)記…）。
text-overflow: ellipsis屬性僅是注解，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記。并不具備其它的樣式屬性定義。我們想要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果。還必須定義：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）。只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。
?參考資料：http://www.52css.com/article.asp?id=602
?
那么，如果我們要給p標(biāo)簽定義text-overflow:ellipsis就可以這么寫(xiě)：
?使用樣式前：
使用樣式后：
?
text-overflow 指南：
語(yǔ)法：?
text-overflow?:?clip?|?ellipsis?
?
參數(shù)：?
clip?:? 不顯示省略標(biāo)記（...），而是簡(jiǎn)單的裁切
（clip這個(gè)參數(shù)是不常用的！）
ellipsis?:? 當(dāng)對(duì)象內(nèi)文本溢出時(shí)顯示省略標(biāo)記（...）
?
說(shuō)明：?
設(shè)置或檢索是否使用一個(gè)省略標(biāo)記（...）標(biāo)示對(duì)象內(nèi)文本的溢出。
請(qǐng)您注意，text-overflow:ellipsis屬性在FF中是沒(méi)有效果的。
示例：
div?{?text-overflow?:?clip;?}?
text-overflow是一個(gè)比較特殊的樣式，我們可以用它代替我們通常所用的標(biāo)題截取函數(shù)，而且這樣做對(duì)搜索引擎更加友好，如：標(biāo)題文件有50個(gè)漢字，而我們的列表可能只有300px的寬度。如果用標(biāo)題截取函數(shù)，則標(biāo)題不是完整的，如果我們用CSS樣式text-overflow:ellipsis，輸出的標(biāo)題是完整的，只是受容器大小的局限不顯示出來(lái)罷了。
關(guān)于text-overflow屬性如何應(yīng)用，我們作如下的說(shuō)明講解：
text-overflow屬性僅是注解，當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記。并不具備其它的樣式屬性定義。我們想要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果。還必須定義：強(qiáng)制文本在一行內(nèi)顯示（white-space:nowrap）及溢出內(nèi)容為隱藏（overflow:hidden）。只有這樣才能實(shí)現(xiàn)溢出文本顯示省略號(hào)的效果。
測(cè)試結(jié)果：
一、僅定義text-overflow:ellipsis;?不能實(shí)現(xiàn)省略號(hào)效果。
二、定義text-overflow:ellipsis;?white-space:nowrap;?同樣不能實(shí)現(xiàn)省略號(hào)效果。
三、同時(shí)應(yīng)用：?text-overflow:ellipsis;?white-space:nowrap;?overflow:hidden;?實(shí)現(xiàn)了所想要得到的溢出文本顯示省略號(hào)效果。
?
?
?
瀏覽器兼容狀況
Firefox不支持這個(gè)屬性！這回，Firefox你也太另類(lèi)了吧！還有別的辦法么，當(dāng)然有，方法還挺多的。
???????? 比如Mozilla developer center推薦的-moz-binding CSS屬性。Mozilla developer center給出的理由是text-overflow沒(méi)有W3C的規(guī)范…但是因?yàn)镕irefox支持XUL，一種XML的用戶界面語(yǔ)言。并且Firefox還支持XBL，一種XML綁定語(yǔ)言，這樣我們就可以使用Mozilla developer center推薦的-moz-binding CSS屬性來(lái)綁定XUL里的ellipsis屬性了。
?
?
1.XUL方式?
首先，我們創(chuàng)建XUL，它應(yīng)該被保存為ellipsis.xml：??然后我們需要把這個(gè)xml文件放到一個(gè)目錄，原來(lái)的css需要加一條，變成這樣
?
?雖然Firefox通過(guò)XUL的方式實(shí)現(xiàn)了ellipsis，但是還是需要注意以下這些問(wèn)題：
1.經(jīng)過(guò)XUL處理過(guò)的文本你將不能被選中，按理說(shuō)-moz-user-select: text; 屬性將允許文本被選中，但是我沒(méi)有試驗(yàn)成功。
2.如果你給父元素綁定了XUL，那么子元素的內(nèi)容將變得不可見(jiàn)。例如：
如果你只是給p節(jié)點(diǎn)綁定了XUL，那么在Firefox下你將看不到haha這個(gè)內(nèi)容。
它的源代碼實(shí)際上是：
<p>It is a long<em>?haha</em>?long long long long text!??</p>
?
2.Javascript方式
既然XUL無(wú)法完美解決Firefox下文字溢出顯示…，那么我們就求助javascript吧，當(dāng)然，并不是古老的截取一定數(shù)目的字符來(lái)實(shí)現(xiàn)。
這里以jQuery為例，代碼如下：
這段js的原理很簡(jiǎn)單，就是通過(guò)不斷的比較寬度值，然后逐個(gè)縮短字符寬度，當(dāng)最后寬度合適的時(shí)候，停止循環(huán)，就實(shí)現(xiàn)了文字溢出顯示…的效果。
?
?
?
?
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/zjfazc/archive/2012/07/07/2580685.html
總結(jié)
以上是生活随笔為你收集整理的css小经验： 转载 - CSS文本溢出省略号：text-overflow:ellipsis的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Ubuntu 使用Git 使用
- 下一篇： CSS+js弹出居中的背景半透明div层