溢出文本显示省略号,兼容常用浏览器

溢出文本显示省略号,兼容常用浏览器

最近研究css样式，无意中对 "溢出文本显示省略号" 感兴趣，以前我在这个问题上都是用程序写个截取函数来判断，确定要显示多少个字符，多出规定的字符就用省略号("...")代替，虽然这个方法能解决实际问题，但自己总觉得有些不实在。后来在一篇div+css中发现用css样式也可以做到隐藏溢出的文本。就是text-overflow这个样式，text-overflow是一个比较特殊的属性，W3C早前的文档中 是这样定义的：
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）。只有这样才能实现溢出文本显示省略号的效果。

view source

print?

1.

P{

2.

Width:

100%

;

3.

text-

overflow

:ellipsis;

4.

-o-text-

overflow

:ellipsis;

5.

white-space

:

nowrap

;

6.

overflow

:

hidden

;

7.

}

浏览器兼容状况：




OH,FML!Firefox不支持这个属性！这回，Firefox你也太另类了吧！还有别的办法么，当然有，方法还挺多的。

1、XUL方式：

首先，我们创建XUL，它应该被保存为ellipsis.xml
<?xml version="1.0"?>
<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:window>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</xul:window>
</content>
</binding>
</bindings>

然后我们需要把这个xml文件放到一个目录，原来的css需要加一条，变成这样

view source

print?

1.

p {

2.

white-space

:

nowrap

;

3.

width

:

100%

;

/* IE6 需要定义宽度 */

4.

overflow

:

hidden

;

5.

-o-text-

overflow

:ellipsis;    

/* Opera */

6.

text-

overflow

:ellipsis;    

/* IE, Safari (WebKit) */

7.

-moz-binding:

url

(

'ellipsis.xml#ellipsis'

);

/* Firefox */

8.

}

虽然Firefox通过XUL的方式实现了ellipsis，但是还是需要注意以下这些问题：
（1）经过XUL处理过的文本你将不能被选中，按理说-moz-user-select:text; 属性将允许文本被选中，但是我没有试验成功。
（2）如果你给父元素绑定了XUL，那么子元素的内容将变得不可见。
例如：源代码为 <p>It is a long<em>haha</em> long long long long text!</p>
结果在firefox浏览器中是看不到haha内容的。

参考资料:
http://www.w3.org/TR/2003/CR-css3-text-20030514/
http://www.quirksmode.org/css/contents.html
https://bugzilla.mozilla.org/show_bug.cgi?id=312156
https://developer.mozilla.org/En/XUL
https://developer.mozilla.org/En/XUL/Description
http://www.rikkertkoppes.com/thoughts/2008/6/
http://www.w3.org/TR/xbl/
http://www.w3.org/TR/css3-text/

2、Javascript方式：

既然XUL无法完美解决Firefox下文字溢出显示…，那么我们就求助javascript吧，当然，并不是古老的截取一定数目的字符来实现。这里以jQuery为例，代码如下：

view source

print?

01.

(

function

($) {

02.

$.fn.ellipsis =

function

(enableUpdating){

03.

var

s = document.documentElement.style;

04.

if

(!(

'textOverflow'

in

s ||

'OTextOverflow'

in

s)) {

05.

return

this

.each(

function

(){

06.

var

el = $(

this

);

07.

if

(el.css(

"overflow"

) ==

"hidden"

){

08.

var

originalText = el.html();

09.

var

w = el.width();

10.

var

t = $(

this

.cloneNode(

true

)).hide().css({

11.

'position'

:

'absolute'

,

12.

'width'

:

'auto'

,

13.

'overflow'

:

'visible'

,

14.

'max-width'

:

'inherit'

15.

});

16.

el.after(t);

17.

var

text = originalText;

18.

while

(text.length > 0 && t.width() > el.width()){

19.

text = text.substr(0, text.length - 1);

20.

t.html(text +

"..."

);

21.

}

22.

el.html(t.html());

23.

t.remove();

24.

if

(enableUpdating ==

true

){

25.

var

oldW = el.width();

26.

setInterval(

function

(){

27.

if

(el.width() != oldW){

28.

oldW = el.width();

29.

el.html(originalText);

30.

el.ellipsis();

31.

}

32.

}, 200);

33.

}

34.

}

35.

});

36.

}

else

return

this

;

37.

};

38.

})(jQuery);

这段js的原理很简单，就是通过不断的比较宽度值，然后逐个缩短字符宽度，当最后宽度合适的时候，停止循环，就实现了文字溢出显示…的效果。
这段js还需要一段css来配合。

view source

print?

1.

.overflow {

2.

width

:

300px

;

3.

text-

overflow

:ellipsis;

4.

-o-text-

overflow

:ellipsis;

5.

white-space

:

nowrap

;

6.

overflow

:

hidden

;

7.

}

同时还需调用到jquery库，网上下载一个就可以了。

<script language="javascript" src="jquery.js"></script>
js里有个判断就是当样式里出现text-overflow或者-o-text-overflow的时候，便不会执行这段js。因为支持这两个属性的浏览器可以自己实现ellipsis效果。具体调用如：
<script>
$(document).ready( function() {
$("#partsid").ellipsis(true);
});
</script>
或者
<script>
$(document).ready( function() {
$(".overflow").ellipsis(true);
});
</script>
以上是通过className或者组建id来调用js函数。

这两种方法都可以实现Firefox下ellipsis的效果，如何取舍使用，具体还得根据你要运用到的项目的具体情况来具体分析，XUL实现的方法的不足之处在以上已经很详尽地列举了，如果你可以避免或者说这些无关你项目的大问题，那么XUL不失一个好方法。

原址:http://www.phper.org.cn/?post=103