Html 如何使用 CSS 截断表格中的长文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8818495/
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 can I truncate long texts in a table using CSS?
提问by Naor
Can anyone give a CSS example of how can I create a table where long texts are truncated to texts ending with "..."?
谁能给出一个 CSS 示例，说明如何创建一个表格，其中长文本被截断为以“...”结尾的文本？
Here is the example: http://jsfiddle.net/NpABe/
这是示例：http: //jsfiddle.net/NpABe/
<table>
<tr>
<td>aaaa</td>
<td>ssssssss</td>
<td>dddddddddddd</td>
</tr>
<tr>
<td>ffffffffffffffff</td>
<td>gggggggggggggggggggg</td>
<td>hhhhhhhhhhhhhhhhhhhhhhhh</td>
</tr>
<tr>
<td>jjjjjjjjjjjjjjjjjjjjjjjjjjjj</td>
<td>kkkkkkkkkkkkkkkkkkkkkkkkkkkkkkkk</td>
<td>llllllllllllllllllllllllllllllllllll</td>
</tr>
</table>
回答by Rob Agar
Use text-overflow: ellipsis. You will need to fix the width of the cells and prevent line wrapping:
使用text-overflow: ellipsis. 您将需要固定单元格的宽度并防止换行：
td {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
EDIT: actually this won't work. It seems you need a container div to apply the styles to:
编辑：实际上这行不通。似乎您需要一个容器 div 来将样式应用于：
<table>
<tr>
<td><div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div</td>
(snip)
And then:
进而：
td div {
width: 100px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
EDIT 2Ah there is a way, but only if you use table-layout: fixed:
编辑 2啊，有一种方法，但前提是您使用table-layout: fixed：
table {
table-layout: fixed;
width: 100px;
}
td {
white-space: nowrap;
overflow: hidden; /* <- this does seem to be required */
text-overflow: ellipsis;
}
回答by bmode
This is a variation on the answer from @RobAgar that works well for me. I define the following CSS:
这是@RobAgar 的答案的变体，对我来说效果很好。我定义了以下 CSS：
td.item-node {
max-width: 10em;
}
div.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
And the HTML looks like
HTML看起来像
<td class="item-note">
<div class="ellipsis">Really super duper long item note that will truncate</div>
</td>
This way I can specify the width on the thing I care about (the table cell) without having to repeat all the white-space, overflow CSS properties for each cell. The class on the div also makes it clear what its purpose is.
这样我就可以指定我关心的东西（表格单元格）的宽度，而不必为每个单元格重复所有的空白、溢出 CSS 属性。div 上的类也清楚地说明了它的目的是什么。
回答by CrsCaballero
If you need truncate text for just one line use this css:
如果您只需要截断一行的文本，请使用此 css：
.truncate-text-one-line{
width:80%;
height: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
Otherwise, use this script:
否则，请使用此脚本：
function shorten_text(text, maxLength) {
var ret = text;
if (ret.length > maxLength) {
ret = ret.substr(0,maxLength-3) + "...";
}
document.write(ret);
}
