在响应表中,当th
中的数据增加时(随着col-xs-2
宽度的增加),text-overflow:ellipsis
不工作。
代码如下:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th class="col-xs-2" style="text-overflow: ellipsis;">Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</th>
<th class="col-xs-1">Firstname</th>
<th class="col-xs-1"> Lastname</th>
<th class="col-xs-4">Age</th>
<th class="col-xs-2">City</th>
<th class="col-xs-2">Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anna</td>
<td>Pitt</td>
<td>35</td>
<td>New York</td>
<td>USA</td>
</tr>
</tbody>
</table>
</div>
5条答案
按热度按时间4dbbbstv1#
text-overflow属性仅影响在其内嵌前进方向MDN上溢出块容器元素的内容
要使
text-overflow
正常工作,单独指定text-overflow: ellipsis
不会有任何效果-您应该同时使用以下样式:表格布局中的文本溢出
因此,
text-overflow
适用于block
元素,但td
是table-cell
元素-表格总是 * 棘手 * 难以处理,因为它们是使用 * 默认表格布局算法 * 呈现的。表格及其单元格的宽度将根据其内容进行调整。1.通常,指定用于获取 * 省略号 * 的常用属性可能有效:
1.如果它们不起作用,或者您开始看到 *table算法 * 对您产生影响,那么您可以将它们与
max-width: 0
沿着使用一个
1.另一个hack是用
width: 100%
和一个inline-block
* 伪元素 * 将位于td
内的absolute
中的文本 Package 起来。hc8w905p2#
从Bootstrap 4开始,您可以使用
.text-truncate
类执行以下操作。更多详细信息,请访问https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
4szc88ey3#
在Bootstrap 4中,你可以使用
.text-truncate
类,它会自动为相关组件添加这些样式。则可以设置元素的最大宽度以获得更可靠的输出。
ifsvaxew4#
对bootstrap 4的另一个建议是:
Github Docs
ni65a41a5#
在Bootstrap 5中,您可以像其他人提到的那样,将
text-truncate
类添加到<td>
中,例如:若要显示完整文本,请添加此CSS样式以在悬停时显示文本: