标签：多行 省略 innerHTML js var overflow hidden css more

用 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()

效果：

标签：多行,省略,innerHTML,js,var,overflow,hidden,css,more
来源： https://blog.csdn.net/yuanqi3131/article/details/122835956

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。