文章轉(zhuǎn)自這里(現(xiàn)在貌似被黑了，建議不要點(diǎn)擊了)

ps：因在該地方?jīng)]看到轉(zhuǎn)載按鈕，復(fù)制下存到這里以待自己方便，別人能看到幫助一下更是樂(lè)意之至，效果親測(cè)可以實(shí)現(xiàn)，兼容IE、谷歌、火狐

由于文字內(nèi)容長(zhǎng)度的不確定,而網(wǎng)頁(yè)的布局精確性,如果文字內(nèi)容超出限定的區(qū)域(div,span等),會(huì)使頁(yè)面變形.為了滿足頁(yè)面的布局合理,用css樣式自動(dòng)限制文字長(zhǎng)度,使溢出內(nèi)容用省略號(hào)…顯示.

限制文字長(zhǎng)的css樣式如下:

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

此樣式兼容ie,chrome,safari,opera,firefox6+版本,但是不兼容firefox低版本.
要想兼容低版本的firefox需要加入一個(gè)文件:ellipsis.xml,內(nèi)容如下:

<?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; }

轉(zhuǎn)載于:https://www.cnblogs.com/daner1257/p/4315527.html

總結(jié)

以上是生活随笔為你收集整理的【转】如何用css限制文字长度,使溢出的内容用省略号…显示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。