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

来源：互联网发布：c4d软件中文版编辑：程序博客网时间：2024/06/03 22:43

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

最近研究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?
P{
Width: 100%;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
overflow:  hidden;
}

浏览器兼容状况：

点击查看原图

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?
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 */
}

虽然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?
(function($) {
$.fn.ellipsis = function(enableUpdating){
var s = document.documentElement.style;
if (!('textOverflow' in s || 'OTextOverflow' in s)) {
return this.each(function(){
var el = $(this);
if(el.css("overflow") == "hidden"){
var originalText = el.html();
var w = el.width();
var t = $(this.cloneNode(true)).hide().css({
'position': 'absolute',
'width': 'auto',
'overflow': 'visible',
'max-width': 'inherit'
});
el.after(t);
var text = originalText;
while(text.length > 0 && t.width() > el.width()){
text = text.substr(0, text.length - 1);
t.html(text + "...");
}
el.html(t.html());
t.remove();
if(enableUpdating == true){
var oldW = el.width();
setInterval(function(){
if(el.width() != oldW){
oldW = el.width();
el.html(originalText);
el.ellipsis();
}
}, 200);
}
}
});
} else return this;
};
})(jQuery);

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

view source
print?
.overflow {
width:300px;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}

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

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