Question

我的桌子上有这个标记。

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

牢不可破的类如下。

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

虽然确实牢不可破，但它只是让桌子更宽（太宽！）而不是切断。我已经测试过将这个课程同时应用于每个控件并同时进行（不是它应该做任何好事 - 我只是恼火）。我注意到隐藏也出现了同样的错误行为，所以我猜测它的溢出并不会咬人。

我明确设置整个 TABLE 和 TD 元素的宽度。无济于事......

我想念什么？如何解决问题？

Answer 1

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

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部分，则文本将不会被包装。

Answer 2

由于你没有隐藏你的溢出（初始是默认为可见，我不认为initial is valid）表格单元格将始终扩展到其中任何非破坏元素的大小。

您可以将其更改为overflow:hidden并将以下内容添加到您的表格中，使其默认为100％：

table {table-layout:fixed;}

如果您这样做，您还可以使用text-overflow:ellipsis;

Example

空格：nowrap + overflow：initial不能按预期工作

2 个答案: