Question

<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))
})

现场例子：http://jsfiddle.net/UTYLf/1/

我想TD的最大宽度 - 40px。我想剪掉溢出的文字。我做了子串，但这不是友好的。 mm ！= ll 和 jj ！= ww 等 mm 和 ll 有2个字符，但 mm 比 ll 占用更多空间。在我的示例中，我希望在表格中与此示例相同：http://jsfiddle.net/Eb6WN/

我必须使用什么而不是substr？我可以使用html，css，javascript（jquery）和PHP

Answer 1

在这些类型的情况下，我使用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");
})

http://jsfiddle.net/hunter/UTYLf/4/

Answer 2

This（text-overflow: ellipsis; white-space: nowrap; overflow: hidden;）应该把你排除在外，我想......

Answer 3

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

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

有关text-overflow的一些文档可以找到here。

Answer 4

为什么不为此使用overflow: hidden;？

Answer 5

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

在表格中剪切文本

5 个答案: