JS实现多行文本超出显示省略号

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            p{
                width: 200px;
                height: 40px;
                border: 1px solid #000;
                overflow: auto;
            }
        </style>
    </head>
    <body>
        <p class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae tempora consequuntur voluptatem ducimus obcaecati id asperiores eligendi officiis eius labore inventore perspiciatis expedita pariatur? Fugit cumque quos maxime facilis pariatur!</p>
        <p class="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae tempora consequuntur voluptatem ducimus obcaecati id asperiores eligendi officiis eius labore inventore perspiciatis expedita pariatur? Fugit cumque quos maxime facilis pariatur!</p>
        
        
        <script type="text/javascript">

            var ps =  document.getElementsByClassName("test");
            
            for (var i = 0; i < ps.length; i++) {
               var arr = ps[i].innerHTML.split(' ');
                while(ps[i].scrollHeight > ps[i].offsetHeight){
                    ps[i].innerHTML = arr.join(' ');
                    arr.pop();      
                }           
                ps[i].innerHTML+= '...';
            }
            
        </script>
    </body>
</html>
JS实现多行文本超出显示省略号

推荐阅读更多精彩内容
