语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
为了在firefox中可用,需要创建XUL,它应该被保存为ellipsis.xml:
把它保存在assets/xml/ellipsis.xml#ellipsis目录中。
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
(clip这个参数是不常用的!)
ellipsis : 当对象内文本溢出时显示省略标记(...)
说明:
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注意,text-overflow:ellipsis属性在FF中是没有效果的。
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。
- .ellipsis {
- width:300px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- }
为了适应多种浏览器,可以写这下面这样:
- .ellipsis {
- width: 180px;
- white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
- -o-text-overflow: ellipsis; /*For Opera*/
- -ms-text-overflow: ellipsis; /*For IE8*/
- -moz-binding: url(assets/xml/ellipsis.xml#ellipsis); /*For Firefox3.x*/
- }
- <?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>
把它保存在assets/xml/ellipsis.xml#ellipsis目录中。