我可以鼓励表格单元格文本换行吗？答案

【问题标题】：Can I encourage table-cell text to line wrap?我可以鼓励表格单元格文本换行吗？
【发布时间】：2011-10-20 16:33:20
【问题描述】：

我有一整列的表，其标题由一个问题组成，并且在以下行中仅包含一个复选框...

------------------------------------------------------
| Would you like this text to wrap ? | <rest of row> |     <-- <th>
-------------------------------------+----------------
|                []                  + <rest of row> |     <-- <tr>        
-------------------------------------+----------------
|                []                  + <rest of row> |     <-- <tr>

我觉得不好看。我可以使用任何标记来“鼓励”浏览器这样呈现它吗...

---------------------------
| There,  |               |
| isn't   |               |
| that    | <rest of row> |     <-- <th>
| nicer?  |               |
----------+----------------
|   []    |               |     <-- <tr>
----------+----------------
|   []    |               |     <-- <tr>
----------+----------------

请注意，我不想强迫浏览器进行特定的渲染，只是为了提出一些建议——或者被告知这是不可能的。

任何解决方案都必须在 MS IE 7 中运行。

【问题讨论】：

标签： html css html-table cross-browser internet-explorer-7

【解决方案1】：

我想你能做的最好的就是给选择的th一个宽度

这里有一些示例代码：http://jsfiddle.net/karameloso/aMTNH/

【讨论】：

哦，对不起，在发布我之前没有看到这个答案。
@spliter：您的答案是“teh codez”，而不是只是指向某个站点的链接，该链接可能会在 SO 之前消失。 ;) 所以，你的回答得到了我的投票。
karameloso，这提示您也将关键代码粘贴到答案中。东南frowns on requiring a user to follow links to get the actual answer.
+1，但是“请注意，我不想强迫浏览器进行特定的渲染，只是为了提出一些建议”——这对我来说似乎是强制的 ;-)
我不知道你所说的“特定渲染”是什么意思。无论如何，如果你不喜欢这个解决方案，让我们等待一个更好的答案;）

【解决方案2】：

为该列设置宽度，例如：

table#my-table th:first-child {width: 4em}

Here is an example

更新。按照 Brock Adams 的建议，将 px 更改为 em

【讨论】：

使用em 或ex 而不是像素。这将更好地适应不同的字体大小（用户可以随意更改）。
此解决方案有效，但第一个子选择器在 IE7 中存在一些问题。这就是为什么我通常会尽量避免它。见communitymx.com/content/article.cfm?page=5&cid=1C603
@karameloso，在你的情况下没有必要避免 :first-child 。查看quirksmode.org/css/contents.html 的最新兼容性表。你的元素不是动态添加的，所以不用担心这在 IE7 中不起作用。
+1，但是“请注意，我不想强迫浏览器进行特定的渲染，只是为了提出一些建议”——这对我来说似乎是强制的 ;-)
@Mawg，在我看来，该解决方案根本不会强制任何特定的渲染。或者我们以不同的方式定义“渲染”；) 您也可以将放在表格标题中的每个单词之后，但是，它确实不会强制任何特定的渲染看起来和感觉难看。所以，我认为宽度是你可以在这里做的最好的:)