更改 HTML 表格中的文本换行行为

Question

我有一个 HTML 表格，其中一个特定的单元格可以有长文本（最多一个段落）。有没有办法改变文本在该单元格中的换行方式，以便如果它足够长以水平拉伸表格，它会换行并可能垂直拉伸表格？我希望列的宽度由列中的其余单元格动态确定，就像该单元格中没有文本一样。

说明：我希望包含可能长文本的单元格的宽度完全由列中其他单元格的宽度确定，其中的文本被包裹以适应该宽度。我不想拥有静态列宽或最大列宽，因为页面是使用数据库中的数据动态生成的。

示例：

<table>
    <tr><td>Test Test Test</td></tr>
    <tr><td class="X">Test Test Test Test Test Test Test Test Test</td>
</table>

"X" 表示在可能的情况下应该换行的单元格

默认行为是

|--------------------------------------------|
|Test Test Test Test                         |
|--------------------------------------------|
|Test Test Test Test Test Test Test Test Test|
|--------------------------------------------|

我希望它改为这样做

|-------------------|
|Test Test Test Test|
|-------------------|
|Test Test Test Test|
|Test Test Test Test|
|Test               |
|-------------------|

即使它小于屏幕的宽度。我想知道创建表格时是否可以在不知道任何文本宽度的情况下执行此操作。

Answer 1

使用样式WORD-BREAK:BREAK-ALL;

Answer 2

据我所知，word-wrap: break-word; 不会在表中工作除非您还使用table-layout:fixed。

我不完全明白你的要求。您说您希望单元格根据其内容占用width，相应地拉伸并在可能的情况下溢出。 这就是表格的作用。这是表的默认行为。唯一不适用的情况是，当你有一个非常长的单词并且没有空格时。无论如何，这将导致表格扩展。奇怪的行为，我知道。

如果您有后一种情况，则必须使用固定宽度的表格。举个例子：

    <table style="width:250px;">
        <tr>
            <td>Test</td>
            <td>Test Test Test Test Test Test Test Test Test</td>
            <td>TestTestTestTestTestTestTestTestTestTestTest</td>
            <td>Test Test Test Test Test Test Test Test Test</td>
        </tr>
    </table>

请注意，table 将容纳它需要的所有房间，因为中间的列。现在，将表格标记更改为以下内容：

    <table style="width:250px; table-layout:fixed">

现在，表格将是 250 像素，但中间列会溢出到下一个单元格（我知道有点疯狂）。现在，我们可以使用word-wrap:break-word 使中间列换行。将此添加到表声明中将创建预期的输出。

更新

所以，我认为 CSS 不可能做到这一点。问题是，您希望表格与除单元格X 之外的最宽列一样宽。要在table 中执行此操作，我们可以编写一些 jQuery 来计算表格的宽度：

（请注意我在<td> 中添加了<span> 以获取内容的实际宽度。这可以替换为其他元素）

    <script type="text/javascript">
        $(function() {
            var widths = $('table td').map(function() { 
                return $("span", this).width();
            }).get();

            var biggest = Math.max.apply(Math, widths);
            $("table").width(biggest + "px");
        });
    </script>
    <table>
        <tr><td><span>Test Test Test Test</span></td></tr>
        <tr><td class="X">Test Test Test Test Test Test Test Test Test</td>
        <tr><td><span>Test Test Test Test Test Test</span></td></tr>
    </table>

Answer 3

我通过将表格单元格中的宽度设置为我想要强制自动换行的一个像素来解决这个问题。

Answer 4

使用nowrap。如果你从<td> 标记中删除它，你会看到它会再次换行。

http://jsfiddle.net/yhFk9/