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

来源：互联网发布：淘宝美工好找工作吗编辑：程序博客网时间：2024/06/08 15:39

直接上代码：(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>

阅读全文

1 0