关于CSS：更改HTML表中的文本换行行为

Changing text wrapping behavior in HTML table

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

澄清：我希望带有长文本的单元格的宽度完全由列中其他单元格的宽度确定，其中的文本换行以适合该宽度。我不想使用静态列宽或最大列宽，因为该页面是使用数据库中的数据动态生成的。

例：

1
2
3
4

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

默认行为是

1
2
3
4
5

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

我希望它代替

1
2
3
4
5
6
7

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

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

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

相关讨论

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

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

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

如果是后一种情况，则必须使用固定宽度的表格。请看以下示例：

1
2
3
4
5
6
7
8

<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将容纳它需要的所有空间。现在，将表标记更改为以下内容：

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

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

更新

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

(注意，我已经在

上添加了以获得内容的实际宽度。这可以替代其他元素)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15