史上最完美最简单实用的解决文本溢出方法（tooltip/popover）

最新推荐文章于 2024-07-09 14:56:30 发布

置顶 front_end_fan

最新推荐文章于 2024-07-09 14:56:30 发布

阅读量4.9k

点赞数 1

文章标签：文本溢出

本文链接：https://blog.csdn.net/qq_39198420/article/details/78814471

版权

文本溢出专栏收录该内容

4 篇文章 0 订阅

订阅专栏

直接上代码：(Talk is cheap. Show me the code)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="bootstrap.min.css"/>
    <style>
        .wxz_overflow{
            /*固定套路4条*/
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            /*根据实际项目，设置合适的宽度*/
            width: 100px;
        }
    </style>
</head>
<body>
    <table class="table table-striped table-hover">
        <tr>
            <td><div class="wxz_overflow" title="<h2 style='color:#f00'>测试文本测试文本测试文本测试文本<h2>" data-placement="auto" data-html="true">测试文本测试文本测试文本测试文本</div></td>
            <td><div class="wxz_overflow" title="测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本" data-placement="auto">测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</div></td>
            <td><div class="wxz_overflow" title="测试文本" data-placement="auto">测试文本</div></td>
        </tr>
        <tr>
            <td>测试文本测试文本测试文本测试文本</td>
            <td>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</td>
            <td>测试文本测试文本测试</td>
        </tr>
        <tr>
            <td>测试文本测试文本测试文本测试文本</td>
            <td>测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本测试文本</td>
            <td>测试文本测试文本测试</td>
        </tr>
    </table>

<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
    <script>
        $(".wxz_overflow").hover(function() {
            if(this.scrollWidth > this.offsetWidth ) { //当内容宽度 > 容器宽度时
            //tooltip和popover都可以使用hover的方式触发，都可以通过加上data-html="true"来自定义样式
                // $(this).popover('toggle');
                  $(this).tooltip('toggle');
            }
        });
    </script>
</body>
</html>

front_end_fan

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
史上最完美最简单实用的解决文本溢出方法（tooltip/popover）

直接上代码：(Talk is cheap. Show me the code)<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="bootstrap.min.css"/> <style> .
复制链接

扫一扫

专栏目录