CSS文本溢出用省略号代替

来源:互联网 发布:max 软件下载 编辑:程序博客网 时间:2024/09/21 09:00
语法: 
  text-overflow : clip | ellipsis 
 
  参数: 
  clip :  不显示省略标记(...),而是简单的裁切
  (clip这个参数是不常用的!)
  ellipsis :  当对象内文本溢出时显示省略标记(...)
 
  说明: 
  设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。

  请您注意,text-overflow:ellipsis属性在FF中是没有效果的。


  text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。

[css] view plaincopy
  1. .ellipsis {  
  2.     width:300px;  
  3.     white-spacenowrap;  
  4.     overflowhidden;  
  5.     text-overflow: ellipsis;  
  6.   
  7. }  

为了适应多种浏览器,可以写这下面这样:

[css] view plaincopy
  1. .ellipsis {  
  2.     width180px;   
  3.     white-spacenowrap;  
  4.     overflowhidden;  
  5.     text-overflow: ellipsis;  
  6.     -o-text-overflow: ellipsis; /*For Opera*/  
  7.     -ms-text-overflow: ellipsis; /*For IE8*/  
  8.     -moz-binding: url(assets/xml/ellipsis.xml#ellipsis); /*For Firefox3.x*/  
  9. }  
为了在firefox中可用,需要创建XUL,它应该被保存为ellipsis.xml:

[html] view plaincopy
  1. <?xml version="1.0"?>  
  2. <bindings   
  3.   xmlns="http://www.mozilla.org/xbl"  
  4.   xmlns:xbl="http://www.mozilla.org/xbl"  
  5.   xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"  
  6. >  
  7.     <binding id="ellipsis">  
  8.         <content>  
  9.             <xul:window>  
  10.                 <xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>  
  11.             </xul:window>  
  12.         </content>  
  13.     </binding>  
  14. </bindings>  

把它保存在assets/xml/ellipsis.xml#ellipsis目录中。