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

最新推荐文章于 2024-03-01 15:53:49 发布

爱喝牛奶的倩

最新推荐文章于 2024-03-01 15:53:49 发布

阅读量1k

点赞数

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

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

版权

该代码示例展示了如何使用JavaScript和CSS处理文本溢出问题，当文本超过设定的宽度时，自动省略并提供鼠标悬停显示全部内容的功能。关键点包括line-height、word-break属性以及利用jQuery获取和操作DOM元素。

摘要由CSDN通过智能技术生成

<!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>

效果图：