用CSS做字符截断

CSS类定义：

.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;/* IE/Safari */
	-ms-text-overflow: ellipsis;
	-o-text-overflow: ellipsis;/* Opera */
	-moz-binding: url("ellipsis.xml#ellipsis");/*FireFox*/
}

注：需要在该css文件同目录下放入ellipsis.xml文件

在需要做截断的元素上设置好宽度。最简单的运用：

<a class="ellipsis" style="width:200px" href="#">Test Test Test Test Test Test Test</a>

对于有些UI上的设计一般在需要做截断的元素后面还有跟一些其他的元素在同一行显示。比如显示名字后面紧跟着性别或者小图标 XXXXXXXXXX...|yy 类似这样的效果。

需要在父节点上设置宽度，但是ellipsis一定要放在要做截断的元素上

<div style="width:200px; border: 1px solid green;"><span class="ellipsis" style="float: left;border-right: 1px solid #ccc; margin-right: 4px; padding-right: 5px;" href="#">Othella Othella Othella Othella</span><span style="">female</span>
</div>

注意这里需要设置float:left是因为如果名字短的时候，不设置float的话后面的female还是显示在第二行，就是说即使名字短的时候，不知道什么原因还是占位了（在FF下试的）.

特别要注意的是在Firefox下用了ellipsis.xml做了截断效果之后这个元素就相当于是图片了，无法选中里面的字，也不能在里面加元素做高亮之类的。

后续：
后面使用发现在IE下用这种方式实现XXXXX...|yy这种效果是实现不了的。因为在IE下要被做截断的元素一定要设置width才行。无奈后来只能用js去实现这个效果了。

FF下还是上面这个方式。对于其他浏览器，需要用js来实现：

fnAutoWidth = function(elements) {
	var $span = $("<span style=\"white-space:nowrap;position:absolute;top:-9999px;font-size:12px;\"></span>").appendTo($("body"));
	
	$(elements).each(function() {
		var $elem = $(this),
			realWidth;
		$span.text($elem.text());
		realWidth = $span[0].offsetWidth;
		if (realWidth < $elem.width()) {
			$elem.css("width", realWidth + "px");
		}
	});
	$span.remove();
};

采用一个辅助的span元素来获取字符所占的真实宽度。如果长度小于该元素设置的width，就把元素的width设置为realWidth。如果是超过设置的width的，那就让其完全elipsis的效果。

这里需要注意的是辅助的这个span元素需要设置成nowrap，而且font-size需要和被截断元素上的保持一致，要不然算realWidth时候会不准。

评论

2 楼 othella 2011-09-20  

qq38450529 写道

请教: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>

1 楼 qq38450529 2011-08-04  

请教:ellipsis.xml里面是什么内容?