火狐兼容

2019-07-11

字数统计: 419字 | 阅读时长≈ 1分

文本溢出省略号显示-火狐不兼容

第一种解决方案：

layui框架对文本溢出隐藏省略号显示

解决：将溢出文字修剪，而不用省略号显示

1
2
3

.activity-table .layui-table-cell{
    text-overflow: clip;
}

第二种解决方案：

使用：
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
在谷歌浏览器没有问题。火狐浏览器不兼容，IE对文本溢出本来是没有兼容问题的，
因为这个文本是在表格（table）里面的，所以IE也会有兼容问题。

要解决IE的兼容问题，要将td改为display:inline-block;

由于改为这样，样式需要改变的地方比较多，而且还是不兼容火狐，所以使用JQ截取字符串来解决.

//页面结构
<td class="link word_cont">
Android：<a href="" target="_blank"></a>
<br>
ios：<a href="" target="_blank"></a>
</td>
//处理溢出隐藏省略号显示 兼容性问题
$('.word_cont a').each(function(){
    //获取td宽度
    var tdWidth = $(".word_cont").width();
    //一个字符宽度
    var internal = 5; 
    //显示个数
    var maxwidth = Math.floor((tdWidth- 160)/internal) ;   
    
    if($(this).text().length>maxwidth){
        //截取字符串
        $(this).text($(this).text().substring(0,maxwidth));
        //多余的用省略号显示
        $(this).html($(this).html()+'...');
    }
    //先隐藏，截取之后，再显示
    $(this).css("display", "inline-block");   
});

但是有个问题，由于字母，数字，分号(.)，空格( )的字符大小不太一样，
所以以一个字符5px来算，不是特别精准。但大致可以解决这个问题。
（若有更好的方法，可以留言给我，感谢！）

本文作者： LQbank
本文链接： http://example.com/2019/07/11/火狐兼容/
版权声明： 本博客所有文章除特别声明外，均采用 MIT 许可协议。转载请注明出处！