多余内容省略号显示

【1】利用 text-overflow:ellipsis 实现单行文本溢出显示省略号效果

ps:所有主流浏览器都支持 text-overflow 属性。但这个属性仅适用于单行文本，多行的情景远比单行复杂。

.demo{
   overflow: hidden;
   text-overflow: ellipsis;//clip|ellipsis
   white-space: nowrap;
}

【2】利用 -webkit-line-clamp 属性

ps：仅适用于webkit内核或移动端页面。在火狐，ie等浏览器并不支持。

.demo{
    width: 200px;
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    border:solid 1px black;
}

【3】设定固定宽高，多余部分隐藏，在结尾用包含省略号（...）的元素覆盖部分内容。

 ps:如果要兼容ie6或7，则不能使用伪元素，可以使用一个<div>或者<span>标签。如果要支持ie8，需要将::after写成:after。

.demo {
    height: 200px;
    width: 200px;
    position:relative;
    line-height:1.4em;
    height:4.2em;
    overflow:hidden;
}
.demo::after {
    content:"...";
    font-weight:bold;
    position:absolute;
    bottom:0;
    right:0;
    padding:0 -20px 1px 45px;
    background-color:white;
}

 

【4】JS

var value = $('#txt').html();
if (value.length > 50) {
    return (value.replace(/\s+/g, "").substr(0, 50) + "...")
}