html动态添加需要显示的内容/文字过多，超出部分以省略号显示，鼠标移入时全部显示

雨点打透心脏的1/2处 2022-06-02 02:38 728阅读 0赞

#### 表格中有时某个元素里内容会很多，多到影响了整个页面布局的情况，除了写死在html中的内容，只要是动态添加的数据都很有可能会发生这种情况，举个例子简单说一下自己目前的处理方法，写的不好的请大神多多指教！ ####

--------------------

先说一下会出现的一些情况：  
![这里写图片描述][format_png]

--------------------

![这里写图片描述][format_png 1]

在CSS样式中我设置的很明确，后面两个 列 的宽度是 40% 不过现在这种情况明显已经超过了40%，甚至已经将前面两列挤得变形了 ；  
造成这样的原因是因为第二行中第三列的内容问题：全是英文且没有空格或任何符号；  
而且，就算是不考虑这种反人类（╮(╯﹏╰）╭）的情况，如果内容太多是不是也会对页面的布局效果或者用户体验不好呢，不好就改呗~

--------------------

![这里写图片描述][format_png 2]

在网上找了一个title样式的插件，稍微改了一点，更适合个人的项目

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Title</title>
        <style>
            table{
                width:60%;
                margin:20px auto;
                border: 1px solid #830098;
            }
            table td{
                border-top: 1px solid #830098;
                text-align: center;
            }
            .first{
                width:20%;
            }
            .second{
                width:40%;
            }
    
            /*title样式*/
            #tooltip {
                border: 1px solid #444;
                font-size: 14px;
                max-width: 205px;
                padding:1em;
                position: absolute;
                z-index:2000;
                text-shadow:none;
                border-radius: 6px;
                -moz-border-radius: 6px;
                -webkit-border-radius: 6px;
                word-break: break-all;
            }
        </style>
    </head>
    <body>
    
    <table cellspacing="0">
        <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>内容</th>
            </tr>
        </thead>
        <tbody id="content"></tbody>
    </table>
    
    <script src="jquery-1.12.4.min.js"></script>
    <script src="jQuery.toolTip.js"></script>
    <script>
        //模拟json数据
        var json=[
            {num: 1,name:"酬乐天频梦微之", desc: "山水万重书断绝，念君怜我梦相闻。我今因病魂颠倒，唯梦闲人不梦君。"},
            {num: 2,name:"lorem", desc: "Loremipsumipsumipsumipsumipsumipsumipsumipsumipsumipsumipsum dolor sit amet, consectetur adipisicing elit. Aspernatur at cum delectus deleniti dolorem ducimus, eius error exercitationem facere fugiat iure minus neque nihil, porro quis sequi sit tempore tenetur."},
            {num: 3,name:"听颖师弹琴", desc: "昵昵儿女语，恩怨相尔汝。划然变轩昂，勇士赴敌场。浮云柳絮无根蒂，天地阔远随飞扬。喧啾百鸟群，忽见孤凤皇。(凤皇 一作 凤凰）跻攀分寸不可上，失势一落千丈强。嗟余有两耳，未省听丝篁。自闻颖师弹，起坐在一旁。推手遽止之，湿衣泪滂滂。颖乎尔诚能，无以冰炭置我肠！"}
        ];
    
        var html="";
    
        for(var i=0,len=json.length;i<len;i++){
            html+=`
                 <tr>
                    <td class="first">${json[i].num}</td>
                    <td class="second">${json[i].name}</td>
                    <td class="second tooltip" title="${json[i].desc}">${tailorContent(json[i].desc,5)}</td>
                 </tr>
                `;
        }
        $("#content").html(html);
    
        $('.tooltip').toolTip();//title  哪个需要显示的title的加入class  tooltip
    
        //内容过多隐藏
        function tailorContent(v,num) {
            var realContent=v;
    
            (v && v.length>num)?  realContent=v.slice(0,num)+"..." : realContent;
    
            return realContent
        }
    </script>
    
    </body>
    </html>

[format_png]: /images/20220602/e9428b0e04a8436d9a0e59863e7b20cc.png
[format_png 1]: /images/20220602/852c50139dea46f9b1935b7aedfd20d5.png
[format_png 2]: /images/20220602/2d0db8dd6ea14669b0c6088dbd82b606.png