html标签label超出长度（文本溢出）时，不换行，而在最后边显示省略号

叁歲伎倆 2024-04-18 09:25 36阅读 0赞

**在label样式上直接写上**

style="width:30px;height:20px;overflow:hidden;text-overflow:ellipsis;"

**[text-overflow:ellipsis及firefox兼容详解][text-overflow_ellipsis_firefox]**

溢出文本显示省略号,text-overflow:ellipsis

这个标题其实已经是一个老生常谈的问题了。很多时候，比如网站最基本的文章列表，标题会很长，而显示列表的区域宽度却没有这么宽，这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示。通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符，但是通过控制字数来截取的话还是存在一个大问题的，因为中文和英文的字符宽度问题，这个字数不好控制，而且通用性较差。那么有没有更好的方法呢，比如直接用 CSS来解决的，当然是有的。

text-overflow是一个比较特殊的属性，W3C早前的文档中（目前的文档中没有包含text-overflow属性，FML!）对其的定义是:

Name: text-overflow-mode  
Value: clip | ellipsis | ellipsis-word

clip : 　不显示省略标记（…），而是简单的裁切  
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。  
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

至于为什么一开始我说text-overflow是一个比较特殊的样式呢？因为我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text- overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了（表现上是超出部分显示省略标记…）。

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

参考资料：http://www.52css.com/article.asp?id=602

那么，如果我们要给p标签定义text-overflow:ellipsis就可以这么写：

p { 
              white-space: nowrap; 
              width: 100%;                  /* IE6 需要定义宽度 */ 
              overflow: hidden;              
          
              -o-text-overflow: ellipsis;    /* Opera */ 
              text-overflow:    ellipsis;    /* IE, Safari (WebKit) */ 
        }

浏览器兼容状况

Browser    Lowest Version    Support of  
Internet Explorer    6.0    text-overflow  
Firefox (Gecko)    —    —  
Opera    9.0    -o-text-overflow  
Safari (WebKit)    1.3 (312.3)    text-overflow

Firefox不支持这个属性！这回，Firefox你也太另类了吧！还有别的办法么，当然有，方法还挺多的。

比如Mozilla developer center推荐的-moz-binding CSS属性。Mozilla developer center给出的理由是text-overflow没有W3C的规范…但是因为Firefox支持XUL，一种XML的用户界面语言。并且 Firefox还支持XBL，一种XML绑定语言，这样我们就可以使用Mozilla developer center推荐的-moz-binding CSS属性来绑定XUL里的ellipsis属性了。

1.XUL方式

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/>
    11. </xul:description>   
    12.             </xul:window>   
    13.         </content>   
    14.     </binding>   
    15. </bindings>

然后我们需要把这个xml文件放到一个目录，原来的css需要加一条，变成这样

p { 
              white-space: nowrap; 
              width: 100%;                  /* IE6 需要定义宽度 */ 
              overflow: hidden;              
          
              -o-text-overflow: ellipsis;    /* Opera */ 
              text-overflow:    ellipsis;    /* IE, Safari (WebKit) */ 
              -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */ 
        }

完！！！

[text-overflow_ellipsis_firefox]: https://www.cnblogs.com/duoqing/articles/1905249.html