css - 空白 : nowrap + overflow:initial doesn't work as expected

Question

我的表格中有这个标记。

<td class="unbreakable">
  <span class="unbreakable">
    a lot of stupid text
  </span>
</td>

unbreakable 类如下。

.unbreakable {
  white-space: nowrap;
  overflow: initial;
}

虽然确实坚不可摧，但它只是让 table 变宽(太宽了!)而不是切断。我已经测试过将该类单独应用于每个控件，并且同时应用于两个控件(并不是说它应该有任何好处 - 我只是很生气)。我注意到 hidden 也发生了同样的不当行为，所以我猜测它是 overflow 没有咬人。

我正在显式设置整个 TABLE 和 TD 元素的宽度。没用...

我遗漏了什么以及如何解决这个问题？

Answer 1

我认为您正在使用 table-layout: fixed 搜索 overflow: hidden。

fiddle

html:

<table style="table-layout:fixed; width:100%;">
    <tr>
        <td class="unbreakable">
          <span class="unbreakable">
             a lot of stupid text a lot of stupid text a lot of stupid text a lot of stupid text a lot of stupid text
          </span>
        </td>
    </tr>
</table>

CSS:

.unbreakable {
  overflow: hidden;
  white-space: nowrap;
}

请注意，如果您删除 table-layout:fixed 部分，文本将不会换行。