css - 为什么我的 td 不包装它的内容

Question

我有一个表格单元格一直拒绝包装它的内容（跨度）。这是根据 Chrome 开发工具的场景：

有以下<td>规则：

overflow:visible;
white-space:normal;

有<table>：

table-layout:fixed;

表中的第一行有两列定义了固定宽度；有问题的单元格有padding="2"。

据我所知，应该这样做，但它不是包装内容。我尝试使用以下规则失败：

word-break: break-all;
word-wrap: break-word;
max-width: 120px; /*this is the max width I want to ensure*/

我在这里想念什么？

Answer 1

我不知道您的代码到底如何，因为您没有发布它，但我按照您的指示操作，它对我有用。

在这里看到它：http: //jsfiddle.net/FJ7dB/

HTML：

<table>
    <tr>
        <td>TD-1-1</td>
        <td padding="2">
            <span>TD-1-2 ContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContentContent</span>
        </td>
    </tr>
    <tr>
        <td>TD-2-1</td>
        <td>TD-2-2</td>
    </tr>
</table>

CSS：

table{
    table-layout:fixed;
    border:1px solid blue;
}
td{
    width:120px;
    max-width:120px;
    word-break: break-all;
    word-wrap: break-word;
    border:1px solid red;
}

使它起作用的是max-width，您说它不成功。

而且没有必要设置

overflow:visible;
white-space:normal;

因为visible和normal是它们的默认值。