div超出多行显示时用省略号代替，鼠标触碰显示完整的内容

最新推荐文章于 2023-11-30 17:32:56 发布

ybhxqq

最新推荐文章于 2023-11-30 17:32:56 发布

阅读量994

点赞数

文章标签：前端 javascript css html5 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_66911948/article/details/129547191

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery.min.js"></script>
        <style>
            .news-txt p {
                width: 100px;
                word-break: break-all;
                line-height: 19px;
            }
        </style>
    </head>
    <body>
        <div class="news-txt">
            <p>发就开始放假啊时间的话飞机撒打发卡合计收到回复束带结发回家撒等哈飞机萨达合计粉红色大家啊很费劲啊三打哈飞机三打哈就发哈手机金黄色的接化发收款方哈萨</p>
        </div>
        <script>
            function overflow() {
                var dom = document.querySelector('.news-txt p');
                console.log(dom.innerText);
                var text = dom.innerText;
                for (var i = 0; i < text.length; i++) {
                    var stext = text.substring(0, i + 1);
                    dom.innerText = stext;
                    var width = dom.offsetHeight;
                    if (width > 38) { // 默认行高设置的是19，这里代表超出两行就省略
                        stext = text.substring(0, i - 3) + '...';
                        dom.innerText = stext;
                        dom.setAttribute('title', text);
                        break;
                    }
                }
            }
            overflow()
        </script>
    </body>
</html>

效果图：