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

【问题标题】：cut text in table with PHP or jQuery/html/css使用 PHP 或 jQuery/html/css 剪切表格中的文本
【发布时间】：2011-10-20 09:48:48
【问题描述】：

<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/

【问题讨论】：

标签： php javascript jquery html css

【解决方案1】：

添加overflow: hidden。

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

【讨论】：

+1，谢谢，但如果我想添加溢出文本，例如“8”怎么办？
我不确定你的意思。你能举个例子吗？
正如@VinayC 回答的那样，text-overflow: ellipsis 会将... 添加到剪切的文本中。但是，在 7 之前的 Firefox 中不起作用。我认为除了省略号之外没有其他显示其他字符的 CSS 方式。
溢出只隐藏宽度限制后的文字，没有。应该出现最适合限制的字符数。

【解决方案2】：

这有点迂回（并且使用 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/

【讨论】：

【解决方案3】：

我认为你最好的选择是 text-overflow 属性 -

#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) 似乎支持它。

【讨论】：