（轉載： http://blog.163.com/yinwei_666/blog/static/2036157320101113102733794/）

?

很多時候，比如網站最基本的文章列表，標題會很長，而顯示列表的區域寬度卻沒有這么寬，這時候最正常的做法就是讓超出寬度的部分文字用省略號(…)來表示。通常做法是網站后臺程序截取。

這個標題其實已經是一個老生常談的問題了。很多時候，比如網站最基本的文章列表，標題會很長，而顯示列表的區域寬度卻沒有這么寬，這時候最正常的做法就是讓超出寬度的部分文字用省略號(…)來表示。通常做法是網站后臺程序截取一定的字符然后輸出到前臺顯示或者前臺用javascript截取一定的字符，但是通過控制字數來截取的話還是存在一個大問題的，因為中文和英文的字符寬度問題，這個字數不好控制，而且通用性較差。那么有沒有更好的方法呢，比如直接用CSS來解決的，當然是有的。

text-overflow是一個比較特殊的屬性，W3C早前的文檔中（目前的文檔中沒有包含text-overflow屬性，FML!）對其的定義是:

Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word?
clip : 　不顯示省略標記（…），而是簡單的裁切
ellipsis : 　當對象內文本溢出時顯示省略標記（…），省略標記插入的位置是最后一個字符。
ellipsis-word : 　當對象內文本溢出時顯示省略標記（…），省略標記插入的位置是最后一個詞（word）。

?至于為什么一開始我說text-overflow是一個比較特殊的樣式呢？因為我們可以用它代替我們通常所用的標題截取函數，而且這樣做對搜索引擎更加友好，如：標題文件有50個漢字，而我們的列表可能只有300px的寬度。如果用標題截取函數，則標題不是完整的，如果我們用CSS樣式text-overflow:ellipsis，輸出的標題是完整的，只是受容器大小的局限不顯示出來罷了（表現上是超出部分顯示省略標記…）。

text-overflow: ellipsis屬性僅是注解，當文本溢出時是否顯示省略標記。并不具備其它的樣式屬性定義。我們想要實現溢出時產生省略號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣才能實現溢出文本顯示省略號的效果。

?參考資料：http://www.52css.com/article.asp?id=602

?

那么，如果我們要給p標簽定義text-overflow:ellipsis就可以這么寫：

?使用樣式前：

使用樣式后：

?

text-overflow 指南：

語法：?
　　text-overflow?:?clip?|?ellipsis?
?
　　參數：?
　　clip?:?　不顯示省略標記（...），而是簡單的裁切
　　（clip這個參數是不常用的！）
　　ellipsis?:?　當對象內文本溢出時顯示省略標記（...）
?
　　說明：?
　　設置或檢索是否使用一個省略標記（...）標示對象內文本的溢出。
　　請您注意，text-overflow:ellipsis屬性在FF中是沒有效果的。

　　示例：
　　div?{?text-overflow?:?clip;?}?

　　text-overflow是一個比較特殊的樣式，我們可以用它代替我們通常所用的標題截取函數，而且這樣做對搜索引擎更加友好，如：標題文件有50個漢字，而我們的列表可能只有300px的寬度。如果用標題截取函數，則標題不是完整的，如果我們用CSS樣式text-overflow:ellipsis，輸出的標題是完整的，只是受容器大小的局限不顯示出來罷了。

　　關于text-overflow屬性如何應用，我們作如下的說明講解：

　　text-overflow屬性僅是注解，當文本溢出時是否顯示省略標記。并不具備其它的樣式屬性定義。我們想要實現溢出時產生省略號的效果。還必須定義：強制文本在一行內顯示（white-space:nowrap）及溢出內容為隱藏（overflow:hidden）。只有這樣才能實現溢出文本顯示省略號的效果。

　　測試結果：

　　一、僅定義text-overflow:ellipsis;?不能實現省略號效果。

　　二、定義text-overflow:ellipsis;?white-space:nowrap;?同樣不能實現省略號效果。

　　三、同時應用：?text-overflow:ellipsis;?white-space:nowrap;?overflow:hidden;?實現了所想要得到的溢出文本顯示省略號效果。

?

?

?

瀏覽器兼容狀況

Firefox不支持這個屬性！這回，Firefox你也太另類了吧！還有別的辦法么，當然有，方法還挺多的。
???????? 比如Mozilla developer center推薦的-moz-binding CSS屬性。Mozilla developer center給出的理由是text-overflow沒有W3C的規范…但是因為Firefox支持XUL，一種XML的用戶界面語言。并且Firefox還支持XBL，一種XML綁定語言，這樣我們就可以使用Mozilla developer center推薦的-moz-binding CSS屬性來綁定XUL里的ellipsis屬性了。

?

?

1.XUL方式

?

首先，我們創建XUL，它應該被保存為ellipsis.xml：?

?然后我們需要把這個xml文件放到一個目錄，原來的css需要加一條，變成這樣

?

?雖然Firefox通過XUL的方式實現了ellipsis，但是還是需要注意以下這些問題：
1.經過XUL處理過的文本你將不能被選中，按理說-moz-user-select: text; 屬性將允許文本被選中，但是我沒有試驗成功。
2.如果你給父元素綁定了XUL，那么子元素的內容將變得不可見。例如：

如果你只是給p節點綁定了XUL，那么在Firefox下你將看不到haha這個內容。
它的源代碼實際上是：
<p>It is a long<em>?haha</em>?long long long long text!??</p>

?

2.Javascript方式
既然XUL無法完美解決Firefox下文字溢出顯示…，那么我們就求助javascript吧，當然，并不是古老的截取一定數目的字符來實現。
這里以jQuery為例，代碼如下：

這段js的原理很簡單，就是通過不斷的比較寬度值，然后逐個縮短字符寬度，當最后寬度合適的時候，停止循環，就實現了文字溢出顯示…的效果。

?

?

?

?

?

?

?

轉載于:https://www.cnblogs.com/zjfazc/archive/2012/07/07/2580685.html

總結

以上是生活随笔為你收集整理的css小经验： 转载 - CSS文本溢出省略号：text-overflow:ellipsis的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。