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

来源：互联网发布：淘宝退款后优惠券退吗编辑：程序博客网时间：2024/06/07 01:00

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

本文以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>

效果

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

0 0