如果文本中有换行符，如何扩展 td 的宽度？答案

【问题标题】：How to extend the width of a td if there are line breaks in the text?如果文本中有换行符，如何扩展 td 的宽度？
【发布时间】：2013-12-09 22:58:12
【问题描述】：

我有一张桌子，上面有一些长文本和一些短文本。如果<td> 包含长文本，我想增加宽度。

这是我尝试做的：

var text = $('td').text().split('\n');
if(text.length === 1) {
    $(this).css('width','270px');
}

jsFiddle
我尝试用alert(text.length) 获取换行符的数量，我得到1。然后如果有1 个换行符，我添加了.css('width','270px')，但不起作用。我做错了什么？

感谢您的帮助！

【问题讨论】：

你把lenght拼错了——应该是length
你需要table-layout:fixed;吗？没有它，它会根据jsfiddle.net/tytUS中的内容正确调整列的大小
谢谢@smj2393 我已经更正了，但这不是问题。
我认为this 可能有错误的范围。您想在 td 出现换行符后立即对其进行扩展？
@MackieeE 我需要使用table-layout:fixed;，因为我想在td 上获得word-break: break-word;。

标签： javascript jquery html-table

【解决方案1】：

从您的小提琴中，我猜您不能使用 split('\n') 来检测文本是否分成多行，因为这些换行符是由浏览器自动插入以用于布局目的，并且它们在文本中不存在 \n .

我建议比较单元格的渲染高度来计算里面的行数。

更新

谢谢比尔，这是一个很好的观点。每行中的单元格始终具有相同的高度。我想到的第一个解决方案是在单元格内使用包装器 div。它们只会根据需要扩展以显示文本。这不是“好”，但似乎可以完成这项工作：http://jsfiddle.net/dsc4m/7/

【讨论】：

啊，另一个有趣的假设！
非常感谢@ToniTornado。
很高兴听到它对您有所帮助。我想知道你为什么不在这张桌子上进行自动布局......？如有必要，浏览器会扩展该行。
我刚刚尝试更新我的答案...所有单元格的高度都相同。您可能需要根据单元格文本中的字符数量来执行此操作。
@ToniTornado 这是我的小小提琴，如果你想弄乱它来更新你的答案，因为它被标记为已接受。 jsfiddle.net/dsc4m/6

【解决方案2】：

我认为你正在尝试做的事情：

var $tds = $('td');

$tds.each(function(){

    var $td = $(this), length = $.trim($td.text()).length;

    if( length > 22 ) {
        $td.css('background-color', 'red');
    }

});

如果不是这样，您应该更接近目标。这是一个更新的小提琴：http://jsfiddle.net/dsc4m/6/

【讨论】：

没问题。很高兴每个人都能把事情整理好！