Firefox 的兼容问题

Firefox (火狐) 坑

　　一, css 文本溢出省略号

　　　　单行 : overflow:hidden; text-overflow:ellipsis; white-space:nowrap

　　　　多行 : overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;

　　　　因为text-overflow是一个比较特殊的属性, 我们倔强的Firefox(火狐)不支持这个属性

　　　　所以我们想起他的办法了

　　　　第一个办法就是借助定位和:after伪类来实现, 啥也不多说: 直接上代码实例

<html>
<head>
 <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<style type="text/css">
body{
    font-family:Arial, Helvetica, sans-serif;/*字体。*/
    font-size:12px;/*字体大小12像素。*/
}
div{
    width:200px;/*层的宽度。*/
    height:100px;/*层的高度。*/
    line-height:24px;/*行间距。*/
    position: relative;
    border:#ccc solid 1px;/*层边框为1像素灰色的实线。*/
    background-color:#F9F9F9;/*背景颜色*/
    margin:5px; /*距离周围都是5像素*/
}
div a{
    color:#000;
 display:block;/*定义为块级*/
 width:190px;/*要显示文字的宽度*/
 float:left;/*左对齐*/
 overflow:hidden; /*超出的部分隐藏起来。*/
line-height: 30px;
height: 60px;
font-size: 15px;
 /*white-space:nowrap;*//*不显示的地方用省略号...代替*/
padding-right:7px; /*文字距离右侧7像素。*/
    text-overflow:ellipsis;/* 支持 IE */
    -o-text-overflow: ellipsis;    /* 支持 Opera */
   background: sandybrown;
}
div a:after{
    content:"...";
    position: absolute;
    right: 3px;
    top: 30px;
    }/* 支持 Firefox */
</style>
</head>

<body>
 <div><a href="#">CSS截取字符串d用省略号，超出用省略号用省略号用省略号代替sdfsdfdsfsdfsdfdsfdsfdsfds</a></div>
 <div><a href="#">CSS截取字符串，并将超出用省略号用省略号用省略号代替</a></div>
</body>
</html>

　　　　　　当然还有第二种办法, 那就是借助强大的JavaScript

  (function($) { 
    $.fn.ellipsis = function(enableUpdating){ 
         var s = document.documentElement.style; 
        if (!('textOverflow' in s || 'OTextOverflow' in s)) { 
             return this.each(function(){ 
                 var el = $(this); 
                 if(el.css("overflow") == "hidden"){ 
                     var originalText = el.html(); 
                     var w = el.width(); 
   
                    var t = $(this.cloneNode(true)).hide().css({ 
                         'position': 'absolute', 
                        'width': 'auto', 
                        'overflow': 'visible', 
                         'max-width': 'inherit' 
                     }); 
                    el.after(t); 
   
                    var text = originalText; 
                     while(text.length > 0 && t.width() > el.width()){ 
                         text = text.substr(0, text.length - 1); 
                         t.html(text + "..."); 
                    } 
                     el.html(t.html()); 
  
                     t.remove(); 
  
                     if(enableUpdating == true){ 
                        var oldW = el.width(); 
                         setInterval(function(){ 
                             if(el.width() != oldW){ 
                                oldW = el.width(); 
                                 el.html(originalText); 
                                el.ellipsis(); 
                             } 
                        }, 200); 
                   } 
                 } 
            }); 
        } else return this; 
    }; 
})(jQuery);

备注: 推荐是用第二办法, 不推荐使用 :after伪类

　　　　二, Firefox不支持margin 等于负数

　　　　　　解决办法使用 position: relative;

Firefox 的兼容问题

猜你喜欢