如何使用CSS截断表中的长文本？
如何使用CSS截断表中的长文本？
提问于 2012-01-11 19:30:51
谁能给出一个CSS示例，说明如何创建一个表格，其中长文本被截断为以"...“结尾的文本？
下面是示例：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>回答 3
Stack Overflow用户
发布于 2016-12-17 00:35:16
这是@RobAgar中答案的变体，对我来说效果很好。我定义了以下CSS：
td.item-node {
max-width: 10em;
}
div.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}HTML看起来像这样
<td class="item-note">
<div class="ellipsis">Really super duper long item note that will truncate</div>
</td>这样，我就可以在我关心的东西(表格单元格)上指定宽度，而不必为每个单元格重复所有空白、溢出的CSS属性。div上的类也清楚地说明了它的用途。
Stack Overflow用户
发布于 2017-02-09 14:36:43
如果只需要截断一行文本，请使用以下css：
.truncate-text-one-line{
width:80%;
height: 100px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}否则，请使用以下脚本：
function shorten_text(text, maxLength) {
var ret = text;
if (ret.length > maxLength) {
ret = ret.substr(0,maxLength-3) + "...";
}
document.write(ret);
}Stack Overflow用户
发布于 2021-04-12 13:25:17
css文本溢出:省略号；
td {
display: inline-block;
width: 150px;
white-space: nowrap;
overflow: hidden !important;
text-overflow: ellipsis;
}<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>lllllllllllllllllllllllddddddddddddddddddddddddddddddddddddlllllllllllll</td>
</tr>
</table>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8818495
复制相关文章
相似问题