在响应表中,text-overflow:ellipsis
在数据在 th
中增加时不起作用(如 col-xs-2
宽度增加)。
代码如下:
<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>
最佳答案
The text-overflow property only affects content that is overflowing a block container element in its inline progression direction MDN
要使 text-overflow
正常工作,单独指定 text-overflow: ellipsis
不会有任何好处 - 您应该同时使用以下样式:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
span, div, th, td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
max-width: 100px;
}
<span>Inline element overflow ellipsis do not work</span>
<div>Block elements overflow ellipsis works</div>
<table>
<tr><th>Table - Overflow test</th></tr>
<tr><td>This is a long text</td><td>This is a long text</td></tr>
</table>
表格布局中的文本溢出
因此 text-overflow
适用于 block
元素,但 td
是一个 table-cell
元素 - 表格是处理起来总是棘手,因为它们是使用默认表格布局算法呈现的。调整表格及其单元格的宽度以适合其内容。
通常指定用于获取省略号 的常用属性可能有效:
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
如果它们不起作用,或者您开始发现表格算法 在欺骗您,那么您可以将它们与
max-width: 0
一起使用overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 0;
.table .text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 0; }
<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 text"> 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>
另一个hack 是将文本包装在
span
中,定位在td
内的absolute
中width: 100%
以及inline-block
伪元素。.table .text { position: relative; } .table .text span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: absolute; width: 100%; } .text:before { content: ''; display: inline-block; }
<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 text"> <span> Lorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem IpsumLorem Ipsum</span> </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>
关于html - 如何在 Bootstrap 响应表中使用省略号,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39148127/