【轉】如何用css限制文字長度,使溢出的內容用省略號…顯示

文章轉自這里(現在貌似被黑了，建議不要點擊了)

ps：因在該地方沒看到轉載按鈕，復制下存到這里以待自己方便，別人能看到幫助一下更是樂意之至，效果親測可以實現，兼容IE、谷歌、火狐

由於文字內容長度的不確定,而網頁的布局精確性,如果文字內容超出限定的區域(div,span等),會使頁面變形.為了滿足頁面的布局合理,用css樣式自動限制文字長度,使溢出內容用省略號…顯示.

限制文字長的css樣式如下:

.text_overflow{
width:320px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow:hidden;
}

此樣式兼容ie,chrome,safari,opera,firefox6+版本,但是不兼容firefox低版本.

要想兼容低版本的firefox需要加入一個文件:ellipsis.xml,內容如下:

<?xml version="1.0" encoding="UTF-8"?>
<bindings  xmlns="http://www.mozilla.org/xbl"
  xmlns:xbl="http://www.mozilla.org/xbl"
  xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <binding id="ellipsis">
    <content>
      <xul:description crop="end" xbl:inherits="value=xbl:text">
        <children/>
      </xul:description>
    </content>
  </binding>
</bindings>

之后,css樣式修改如下:

.text_overflow{
width:320px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;-moz-binding:url('ellipsis.xml#ellipsis'); overflow:hidden;
}