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

最新推荐文章于 2025-07-23 16:18:50 发布

原创最新推荐文章于 2025-07-23 16:18:50 发布 · 5.3k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#html #内容过多隐藏 #javascript #title #js插件

javascript 同时被 3 个专栏收录

49 篇文章

订阅专栏

CSS

16 篇文章

订阅专栏

jquery

9 篇文章

订阅专栏

本文介绍了一种处理表格中长内容导致布局变形的方法。通过限制单元格内容长度并在超出部分使用tooltip显示完整信息，有效改善了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

这里写图片描述

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

这里写图片描述

在网上找了一个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>