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{
}
})
});

巴特西

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

最新文章

热门文章