Html 如何在引导响应表中使用省略号
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39148127/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to work with ellipsis in bootstrap responsive table
提问by sibaspage
In a responsive table text-overflow:ellipsisis not working when the data increases in the th(as the col-xs-2width increases).
text-overflow:ellipsis当数据增加时th（随着col-xs-2宽度的增加），响应式表不起作用。
Code below:
代码如下：
<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>回答by kukkuz
The text-overflow property only affects content that is overflowing a block container element in its inline progression direction MDN
text-overflow 属性只影响在其内联进展方向上溢出块容器元素的内容 MDN
For text-overflowto work, specifying text-overflow: ellipsisalone will not do any good - you should use the following styles together:
为了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 in Table Layout表格布局中的文本溢出
So text-overflowapplies to blockelements but tdis a table-cellelement - tables are always trickyto deal with because they are rendered using the default table layout algorithm. The widths of the table and its cells are adjusted to fit their content.
因此，text-overflow适用于block元素，但是td是一个table-cell元素-表始终棘手的处理，因为他们使用的渲染默认表格布局算法。调整表格及其单元格的宽度以适合其内容。
Normally specifying the usual property for getting ellipsismay work:
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;If they do not work or you begin to see the table algorithmdo tricks on you, then you can use them along with
max-width: 0overflow: 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>Another hackis to wrap the text in a
spanpositionedabsoluteinside thetdwithwidth: 100%along with aninline-blockpseudo element..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>
通常指定用于获取省略号的常用属性可能会起作用：
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;如果它们不起作用，或者您开始看到表格算法对您进行了欺骗，那么您可以将它们与
max-width: 0overflow: 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>另一个技巧是将文本与伪元素一起包装在with内的
span定位中。absolutetdwidth: 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>
回答by yeahlad
As of Bootstrap 4 you can do the following using the .text-truncateclass.
从 Bootstrap 4 开始，您可以使用.text-truncate该类执行以下操作。
<th class="col-xs-2 d-inline-block text-truncate" style="max-width: 150px;">
More details found at https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
更多细节见 https://getbootstrap.com/docs/4.0/utilities/text/#text-wrapping-and-overflow
回答by Lasantha
With Bootstrap 4, you can use the .text-truncateclass. It automatically adds these styles for the relevant components.
使用 Bootstrap 4，您可以使用.text-truncate该类。它会自动为相关组件添加这些样式。
.text-truncate{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
then you can set the max-width for the element to get more reliable output.
然后您可以设置元素的最大宽度以获得更可靠的输出。
回答by Tom John
Another suggestion for bootstrap 4:
bootstrap 4 的另一个建议：
.table.table-ellipsis tbody td {
max-width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
