表格溢出内容省略号显示，悬停显示全部

本文以layui为基础添加悬浮提示框，你也可以使用自己的提示框样式或所用框架中的提示框。

html部分

在这里，我随意做一个表格，宽度百分百，外层固定宽度。表格中溢出的文字以“…”表示，此时省略的文本用一个提示框显示，没有省略则不出现全部内容的提示框。（使用layui时用到jQuery,使用其他方式提示全部内容时自行增删即可）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格内容溢出省略号显示</title>

    <!--relate to this page css-->
    <link rel="stylesheet" href="CSS/table.css">

    <!--relate to this page javascript-->
    <script src="jquery-1.9.1.min.js"></script>
    <script src="layer/layer.js"></script>

</head>
<body>
    <div class="contain">
        <table>
            <thead>
                <th>货币</th>
                <th>本周收盘</th>
                <th>上周收盘</th>
                <th>涨跌</th>
                <th>幅度</th>
            </thead>
            <tbody>
                <tr>
                    <td>EURGBPfffffffffffffffffffffffffffffffffffffffffffffffffffffff</td>
                    <td>0.86333333333393</td>
                    <td>0.88945555555555555553</td>
                    <td>-2033333333333333331</td>
                    <td>-2.3166%</td>
                </tr>
                <tr>
                    <td>EURGBP</td>
                    <td>0.8693</td>
                    <td>0.8894</td>
                    <td>-201</td>
                    <td>-2.31%</td>
                </tr>
                <tr>
                    <td>EURGBP</td>
                    <td>0.8693</td>
                    <td>0.8894</td>
                    <td>-201</td>
                    <td>-2.31%</td>
                </tr>

            </tbody>
        </table>
    </div>
</body>
</html>

css部分

.contain {
width:900px;
margin: 15px auto;
font-family: ‘Microsoft YaHei’; }

table {
width:100%;
text-align: center;
border:1px solid #e3e6e8;
border-collapse: collapse;
table-layout: fixed;
display: table; }

th,td {
border: 1px solid #e3e6e8;
height:38px;
line-height: 38px;
overflow: hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

th {
background-color: #189AD6;
color:#fff; }

.layui-layer {
word-wrap: break-word;
word-break: break-all; }

javascript 部分　

js主要利用offsetWidth和scrollWidth判断是否溢出。在这里scrollWidth是包含内容的完全高度，offsetWidth是当前表格单元格的宽度。

<script type="text/javascript">
    $(function () {
        $("td").on("mouseenter",function() {
            if (this.offsetWidth < this.scrollWidth) {
                var that = this;
                var text = $(this).text();
                layer.tips(text, that,{
                    tips: 1,
                    time: 2000
                });
            }
        });
    })
</script>

效果

表格内容溢出省略号显示，鼠标进入显示全部内容

来源：CSDN

作者：花堪泽

链接：https://blog.csdn.net/github_37517254/article/details/56012412

标签

html表格