用 css 或 js 实现多行文本溢出省略

用 css 或 js 实现多行文本溢出省略

CSS：

<div class="container">
    <div class="single">单行：凡世的喧嚣和明亮,世俗的快乐和幸福,如同清亮的溪涧,在风里,在我眼前,汨汨而过,温暖如同泉水一样涌出来,我没有奢望,我只要你快乐,不要哀伤</div>

    <div class="more">多行：生活是一部大百科全书,包罗万象;生活是一把六弦琴,弹奏出多重美妙的旋律:生活是一座飞马牌大钟,上紧发条,便会使人获得浓缩的生命</div>
</div>

<style>
   .container {
    
    
       width: 300px;
   }

   .single {
    
    
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }

   .more {
    
    
       display: -webkit-box;
       -webkit-box-orient: vertical;
       /*从上到下垂直排列子元素*/
       -webkit-line-clamp: 3;
       /*行数，超出三行隐藏且多余的用省略号表示...*/
       line-clamp: 3;
       overflow: hidden;
   }
</style>

效果：

但是上面得多行省略得有兼容性问题，所以就采用js来控制

JS:

<style>
    .container {
    
    
        width: 300px;
    }
    
    .more {
    
    
        height: 60px; /*重点：JS控制的话是要设置容器的高度的*/
    }
</style>

<div class="container">
   <div class="more">多行：生活是一部大百科全书,包罗万象;生活是一把六弦琴,弹奏出多重美妙的旋律:生活是一座飞马牌大钟,上紧发条,便会使人获得浓缩的生命</div>
</div>

function setEllipsis() {
    
     // 设置省略号
    var more = document.getElementsByClassName('more')[0]
    var offsetHeight = more.offsetHeight;
    var scrollHeight = more.scrollHeight;
    var innerHTML = more.innerHTML
    for(i=0; i<innerHTML.length; i++) {
    
     // 出现滚动就截取
        more.innerHTML = innerHTML.substr(0, i);
        if(offsetHeight < more.scrollHeight) {
    
    
            more.style.overflow = 'hidden';
            more.innerHTML = innerHTML.substr(0, i-3) + '...';
            break;
        }
    }
}
setEllipsis()

效果：