Html Bootstrap 3 以响应方式截断表格行内的长文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23431970/
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
Bootstrap 3 truncate long text inside rows of a table in a responsive way
提问by Xsmael
I'm using bootstrap 3 tables, when i put large text in the table it gets wrapped on several lines, but i want it to be truncated with three dots at the end in a responsive way without messing up the layout of the table (i found some solutions but with unpleasant effects).
我正在使用 bootstrap 3 表，当我将大文本放入表中时，它会被包裹在几行上，但我希望它以响应方式在末尾用三个点截断而不会弄乱表的布局（我找到了一些解决方案，但效果不佳）。
Is that possible ? how ?
那可能吗 ？如何 ？
PS: any solution is welcome, but i would like it to be just HTML/CSS if it's possible.
PS：欢迎任何解决方案，但如果可能的话，我希望它只是 HTML/CSS。
采纳答案by Luciano Fantuzzi
I did it this way (you need to add a class textto <td>and put the text between a <span>:
我这样做了（你需要添加一个类的文字来<td>，把一个之间的文本<span>：
HTML
HTML
<td class="text"><span>looooooong teeeeeeeeext</span></td>
<td class="text"><span>looooooong teeeeeeeeext</span></td>
SASS
SASS
.table td.text {
max-width: 177px;
span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
}
}
CSSequivalent
CSS等价物
.table td.text {
max-width: 177px;
}
.table td.text span {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
max-width: 100%;
}
And it will still be mobile responsive (forget it with layout=fixed) and will keep the original behaviour.
它仍然是移动响应的（忘记 layout=fixed）并将保持原始行为。
PS: Of course 177pxis a custom size (put whatever you need).
PS：当然177px是自定义大小（放任何你需要的）。
回答by Zim
You need to use table-layout:fixedin order for CSS ellipsis to work on the table cells.
您需要使用table-layout:fixed，以便 CSS 省略号在表格单元格上工作。
.table {
table-layout:fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
回答by egidiocs
This is what I achieved, but had to set width, and it cannot be percentual.
这是我实现的，但必须设置宽度，并且不能是百分比。
.trunc{
width:250px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
table tr td {
padding: 5px
}
table tr td {
background: salmon
}
table tr td:first-child {
background: lightsalmon
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table>
<tr>
<td>Quisque dignissim ante in tincidunt gravida. Maecenas lectus turpis</td>
<td>
<div class="trunc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</td>
</tr>
</table>or this: http://collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/
或者这个：http: //collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/
回答by Yusuke Okui
I'm using bootstrap.
I used css parameters.
我正在使用引导程序。
我使用了 css 参数。
.table {
table-layout:fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
and bootstrap grid system parameters, like this.
和引导网格系统参数，像这样。
<th class="col-sm-2">Name</th>
<td class="col-sm-2">hoge</td>
