更改HTML表格中的文字环绕行为
我有一个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 |
|-------------------|
即使这小于屏幕的宽度。 我想知道是否有可能在创建表格时不知道任何文本的宽度。
使用WORD-BREAK:BREAK-ALL;风格WORD-BREAK:BREAK-ALL;
据我所知， 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来使中间列换行。 将此添加到表格声明将创建预期的输出。
UPDATE
所以，我不认为这是可能的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>
我通过将宽度设置为表格单元格中的一个像素来解决此问题，我想强制自动换行。
链接地址: http://www.djcxy.com/p/88101.html