table表格中文字超出显示省略号

最新推荐文章于 2022-05-10 11:30:51 发布

weixin_30394981

最新推荐文章于 2022-05-10 11:30:51 发布

阅读量295

点赞数 1

原文链接：http://www.cnblogs.com/xuzhudong/p/8854717.html

版权

原理：

本方法用于解决表格单元格内容过多时的美观问题，主要涉及到5句CSS样式：

table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）
white-space: nowrap 是为了保证无论单元格（TD）中文本内容有多少，都不会自动换行，此时多余的内容会在水平方向撑破单元格。
overflow: hidden 隐藏超出单元格的部分。
text-overflow: ellipsis 将被隐藏的那部分用省略号代替。
可设置 td 宽度属性为：width 或 max-width

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        table tbody td {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
    </style>
</head>
<body>
 <table width="50%" border="1" style="table-layout:fixed;"> 
    <thead> 
        <th> 第一列 </th> 
        <th> 第二列 </th> 
    </thead> 
    <tbody> 
        <tr> 
            <td> 
                <span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span>
                <span>超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容</span> 
            </td> 
            <td> 超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容超长内容 </td> 
        </tr>
         </tbody> 
     </table>
</body>
</html
>

输出如下：

转载于:https://www.cnblogs.com/xuzhudong/p/8854717.html

weixin_30394981

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
table表格中文字超出显示省略号

原理：本方法用于解决表格单元格内容过多时的美观问题，主要涉及到5句CSS样式：table-layout: fixed 由于table-layout的默认值是auto，即table的宽高将取决于其内容的多寡，如果内容的体积无法估测，那么最终表格的呈现形式也无法保证了，fixed一下就好了。（注意：此样式是关键）white-space: nowrap 是为了保证无论单元格（T...
复制链接

扫一扫