css小經驗： 轉載 – CSS文本溢出省略符號：text-overflow:ellipsis

　　（轉載： 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的原理很簡單，就是通過不斷的比較寬度值，然後逐個縮短字元寬度，當最後寬度合適的時候，停止迴圈，就實現了文字溢出顯示…的效果。