table中td内容过长省略号显示

最新推荐文章于 2022-11-07 22:24:24 发布

weixin_30906185

最新推荐文章于 2022-11-07 22:24:24 发布

阅读量607

点赞数

原文链接：http://www.cnblogs.com/miny-simp/p/6279185.html

版权

首先设置 css样式：

table { table-layout: fixed;}

HTML中的table代码：

<tr>
   <th class="col-md-1">用户ID</th>
    <th class="col-md-1">用户名</th>
    <th class="col-md-1">联系电话</th>
    <th class="col-md-1">邮箱</th>
    <th class="col-md-4">描述 </th>
    <th class="col-md-2">添加时间</th>
    <th class="col-md-2">操作</th>
</tr>
【对于bootstrap应该设置th的固定宽度】

设置td超过固定宽度自动显示为省略号：

table tr td {
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
    -moz-text-overflow: ellipsis;
    -webkit-text-overflow: ellipsis;
}

转载于:https://www.cnblogs.com/miny-simp/p/6279185.html