css：在容器内文字超过容器范围，显示一行加省略号或者两行加省略号

一、显示一行加省略号：各浏览器兼容

.box{
    width: 100px;
    overflow:hidden; 
    white-space:nowrap;
    text-overflow:ellipsis; 
}
.box需要是块级或行内块容器，padding为0（貌似可以加上下padding）

white-space：强制显示在一行；text-overflow:ellipsis：多余的以省略号代替；overflow:hidden：多余的文本隐藏

二、显示两行加省略号：仅适用于谷歌浏览器，同样不能加padding

.abcde{
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

三、非谷歌浏览器，文字字数超出范围显示省略号，$('.ieover')为需要做如此处理的文本节点

$(document).ready(function(){
    $(function(){
        if(navigator.userAgent.toLowerCase().indexOf("chrome") == -1){
            $('.ieover').each(function(i, obj){
                var content;
                if($(this).text().length>=110){
                    console.log("www")
                    content=$(this).text().substr(0,110)+'...';
                    console.log($(this).text().substr(0,110))
                    $(this).text(content)
                }
            });
       }else{
       }
    })
});

 

转载于:https://www.cnblogs.com/llqwm/p/9896188.html