firefox ellipsis hack has a condition

通常做firefox的 文字溢出显示省略号会用xul的hack，但是有个条件如果没有满足就会失效，使内容变成空白。

这个条件是:

引用

引用包含-moz-binding的css的页面必须与该css文件同域，并且也要和ellipsis的xml文件同域

也就是说下面这种情况会失效:

引用

http:// domain1.company.com/some-page.htm

引用

<link rel=stylesheet href=http:// domain2.company.com/public/css/ellipsis.css />
<span class=ellipsis style=width:200px>This is a very very very very very very very very very very long sentence</span>

引用

http:// domain2.company.com/public/css/ellipsis.css

引用

.ellipsis {
    -moz-binding: url(ellipsis.xml#ellipsis);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-wrap: normal;
    line-height: inherit;
}

引用

http:// domain2.company.com/public/css/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>

在有些部署场景，静态文件和引用页面的路径不是 全域名匹配的，比如静态文件会部署到不同次级域名的CDN，这种情况下就只能把ellipsis.css的内容以style形式写在页面里了

原文:
http://mattlaine.com/blog/?p=49