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

Posted miny_simp

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了table中td内容过长 省略号显示相关的知识,希望对你有一定的参考价值。

首先设置 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;
}

以上是关于table中td内容过长 省略号显示的主要内容,如果未能解决你的问题,请参考以下文章