Question

<table id="tab">
    <tr><td>....</td><td>2222</td></tr>
    <tr><td>@@@@</td><td>4444</td></tr>
</table>

#tab td {
   border: solid 1px red;
   max-width: 50px;
}

直播示例： http://jsfiddle.net/mCxqD/

如果他太长，我想在TD上剪切文字。我可以使用strlen和substr，但是：

strlen（....）= 4; strlen（@@@@）= 4;

并且在表中占用不同的空间量。

最好的方法是什么？我没有换行到新行。我想要一些事：http://jsfiddle.net/mCxqD/1/

修改溢出：隐藏是好的，但如果我想添加溢出文本例如“*”怎么办？ http://jsfiddle.net/7ksD7/2/

Answer 1

添加overflow: hidden。

演示：http://jsfiddle.net/7ksD7/

Answer 2

我认为你最好的选择是文本溢出属性 -

#tab td {
   border: solid 1px red;
   max-width: 50px;
   overflow:hidden;
   white-space:nowrap;
   text-overflow: ellipsis;
}

请参阅http://jsfiddle.net/7ksD7/5/

请参阅more here大致相同的内容 - 虽然本文说FF不支持该属性，但至少我的浏览器（FF 7）似乎支持它。

Answer 3

这是一个小问题（并且使用jQuery ......虽然你可以很容易地使用常规JS），但是你可以尝试使用JS将文本包装在span标签中并测量它，同时比较最大宽度。您可能需要调整一些内容（例如 - 确保您补偿用于表示截止的字符的宽度），但我认为这应该有效（如果您没有文本溢出可用）：

$(document).ready(function() {
    $('td').each(function() {
        var contents = $(this).html();
        var max_width = $(this).css('max-width').replace('px', '');
        var cut_char = '*';

        $(this).html('');
        $(this).append('<span>' + contents + '</span>');
        var $span = $(this).find('span:first');

        var content_width = $span.innerWidth();

        while (content_width > max_width) {
            var str = $span.html();
            $span.html(str.substring(0, str.length - 1));

            content_width = $span.innerWidth();

            if (content_width < max_width) {
                $span.html(str.substring(0, str.length - 2) + cut_char);
            }
        }
    });
});

这是你的小提琴更新： http://jsfiddle.net/mCxqD/6/

用PHP或jQuery / html / css剪切表格中的文本

3 个答案: