用CSS做字符截断
CSS类定义：

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

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


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

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

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

FF下还是上面这个方式。对于其他浏览器，需要用js来实现：
</xul:window>
</content>
</binding>
</bindings>