html - 如何禁用对 HTML 中的大字进行大小调整的表格

Question

我有这个 DIV

<div style="width:500px;"> </div>

我在里面插入了一张桌子

<table style="width:100%;">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>

如果<td></td>包含普通单词，即使 100 个单词之间有空格，那么 table 将在 div 内保持其大小，但如果一个单元格包含 1 个单词，大约 100 个字母，那么 table 将在其父 div 之外采用更大的大小，overflow:hidden;是很好地隐藏表格的放大，但我希望大小保持不变，并且单元格要增长height，就像它通常对普通单词所做的那样。

Answer 1

word-wrap是较旧的 IE 特定 CSS 规则。要在现代浏览器中自动换行，请使用white-space. 此外，设置max-width似乎有助于使事情正常进行。

td {
  border: 1px solid black;
  width: 100px;
  max-width: 100px;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
  white-space: -pre-wrap; /* Opera 4-6 */
  white-space: -o-pre-wrap; /* Opera 7 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
}

jsFiddle 演示

Answer 2

将表设置max-width为绝对值，由parent div.

尝试：

<table style="width:100%; max-width:500px;">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

Answer 3

使用 CSSword-wrap属性：

td {
     word-wrap: break-word;
}