在表格中剪切文本

Cut text in table

本文关键字：文本 表格      更新时间：2023-09-26
<table id="tab">
    <tr><td class="sub">mmmmm</td><td class="sub">jjjjj</td></tr>
    <tr><td class="sub">lllll</td><td class="sub">wwwww</td></tr>
</table>
#tab td {
  border: 1px solid green;
  max-width: 40px;
}
$(".sub").each(function(){
    var o = $(this).html();
    $(this).html(o.substring(0, 2))
})

实例:https://jsfiddle.net/UTYLf/1/

我想让最大宽度为TD - 40px。我想删除溢出文本。我创建了substring，但这并不好用。 mm ! = 对和 jj ! = ww 等。 mm 和对 2字符,但 mm 需要更多的空间比对。在我的例子中，我想在表中有相同的在这个例子中:https://jsfiddle.net/Eb6WN/

我必须用什么代替substr() ?我可以使用HTML, CSS, JavaScript (jQuery)和PHP

在这些类型的情况下，我使用overflow: hidden并为每个单元格添加title以显示完整的文本:

#tab td {
    border: 1px solid green;
    max-width: 40px;
    overflow: hidden;
}
$(".sub").each(function(){
    $(this).attr("title", $(this).text()).css("cursor", "help");
})
https://jsfiddle.net/hunter/UTYLf/4/

我想这(text-overflow: ellipsis; white-space: nowrap; overflow: hidden;)应该能帮你理清头绪了。

你可以尝试将text-overflow属性添加到你的第一个CSS类中。

#tab td {
  border: 1px solid green;
  max-width: 40px;
  text-overflow: ellipsis;
}

关于text-overflow的一些文档可以在这里找到

为什么不使用overflow: hidden;呢?

也有一个jQuery插件允许使用这个多行
http://plugins.jquery.com/plugin-tags/ellipsis

相关文章：