CSS表强制换行

Question

我有一个基于三列CSS的表格布局。该表旨在将前两列压缩到相对于填充它们的内容的最小宽度，以便第三列可以填充视图的大部分内容。听起来很简单，对吧？好吧，第三列一直给我带来麻烦。

该表是Webkit (基于Safari)应用程序的一部分，无论调整多少大小，它都会填充整个窗口的宽度。因此，没有定义默认宽度。因此，当涉及到对文本块进行换行时，例如URL或简单的重复字符垃圾邮件，它只是继续进行，而不进行换行。

我知道"word-wrap: break-word;“选项，但它不起作用，因为除非我知道孩子的宽度，否则我无法定义宽度。我也尝试过“单词-break: break-all;”--这是可行的，但在一个可以合法地从空格中删除的单词中间看到一个换行并不吸引人。

有没有人知道一个纯HTML &CSS3解决方案，它有两个子框和第三个子框，可以在不使用JavaScript或其他方法的情况下对长文本进行换行？

布局和代码示例：

--------------------------------------------------------------------------------------------
| Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
--------------------------------------------------------------------------------------------
| Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
--------------------------------------------------------------------------------------------

<div class="table_class">
<div class="table_row">
<div class="cell1">data</div>
<div class="cell2">data</div>
<div class="cell3">datadatadatadata…</div>
</div>
</div>

Answer 1

如果要显示表格数据，并试图使div看起来像一个表，为什么不直接使用表呢？它们被设计成具有您所描述的行为类型：

http://jsfiddle.net/Mk7jS/1/

Answer 2

此表布局是否用于表格数据？因为，在这种情况下，您应该使用表。

表格不好的原因是当它们用于图形布局时。他们破解了网站的semantic design。但是，如果内容是表格，那么您应该使用表格。它们已经很好地解决了行和列的布局问题。

或者，如果需要保留div布局，则可以使用table, table-row, and table-cell显示属性。