html標籤label超出長度（文本溢出）時，不換行，而在最後邊顯示省略號

在label樣式上直接寫上

style="width:30px;height:20px;overflow:hidden;text-overflow:ellipsis;"

text-overflow:ellipsis及firefox兼容詳解

溢出文本顯示省略號,text-overflow:ellipsis

這個標題其實已經是一個老生常談的問題了。很多時候，比如網站最基本的文章列表，標題會很長，而顯示列表的區域寬度卻沒有這麼寬，這時候最正常的做法就是讓超出寬度的部分文字用省略號(…)來表示。通常做法是網站後臺程序截取一定的字符然後輸出到前臺顯示或者前臺用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就可以這麼寫：

p { 
          white-space: nowrap; 
          width: 100%;                  /* IE6 需要定義寬度 */ 
          overflow: hidden;              
      
          -o-text-overflow: ellipsis;    /* Opera */ 
          text-overflow:    ellipsis;    /* IE, Safari (WebKit) */ 
    } 

瀏覽器兼容狀況

Browser    Lowest Version    Support of
Internet Explorer    6.0    text-overflow
Firefox (Gecko)    —    —
Opera    9.0    -o-text-overflow
Safari (WebKit)    1.3 (312.3)    text-overflow

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方式

   1. <?xml version="1.0"?>   
   2. <bindings    
   3.   xmlns="http://www.mozilla.org/xbl"   
   4.   xmlns:xbl="http://www.mozilla.org/xbl"   
   5.   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"   
   6. >   
   7.     <binding id="ellipsis">   
   8.         <content>   
   9.             <xul:window>   
10.                 <xul:description crop="end" xbl:inherits="value=xbl:text"><children/>
11. </xul:description>   
12.             </xul:window>   
13.         </content>   
14.     </binding>   
15. </bindings> 

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

 p { 
          white-space: nowrap; 
          width: 100%;                  /* IE6 需要定義寬度 */ 
          overflow: hidden;              
      
          -o-text-overflow: ellipsis;    /* Opera */ 
          text-overflow:    ellipsis;    /* IE, Safari (WebKit) */ 
          -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */ 
    } 

完！！！