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

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

<强>更新

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

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

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

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

4 个答案: