js多行省略兼容浏览器

拼搏现实的明天。 2022-04-17 05:06 142阅读 0赞

废话不说直接上代码啦，

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>example</title>
        <script src="jquery.min.js"></script>
    <style>
        .figcaption{
            background: #EEE;
            /*可不设置宽*/
            width: 410px;
            height: 48px;
            margin: 16px;
        }
        .figcaption p{
            margin: 0;
            line-height: 24px;
        }
        /*行高是高的一半*/
    </style>
    </head>
    <body>
    <div id="app">
         <div class="figcaption">
            <p>
                
    
                
    
                You probably can't d行高是高的一半行高是高的一半行高是高的一半123345667890,./;'[]!~@#$%^&*()_+?><:""::''{}
            </p>
        </div>
    
    </div>
    <script>
        $(".figcaption").each(function (i) {
            var divH = $(this).height();
            var $p = $("p", $(this)).eq(0);
            while ($p.outerHeight() > divH) {
                $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "..."));
            };
        });
    </script>
    </body>
    </html>

***通过js控制，兼容所有浏览器，重点在于height与line-height的关系（倍数）***