为什么'overflow:hidden”对元素不起作用，如何修复它？

为什么 Overflow: Hidden 在

Overflow: Hidden 不起作用

Overflow: Hidden 通常用于隐藏元素内溢出的内容。然而，当应用于

时，元素，它可能无法按预期工作，导致单元格扩展而不是文本截断。

要解决此问题，需要两个额外的 CSS 属性：
表格布局：固定
• - 此属性确保表格具有固定宽度，并且单个单元格不会增长超过it.
white-space: nowrap

- 此属性可防止文本跨多行，确保其保持在指定的单元格宽度内。

示例：

<table>
  <tbody>
    <tr>
      <td>
        This_is_a_terrible_example_of_thinking_outside_the_box.
      </td>
    </tr>
  </tbody>
</table>

考虑以下 HTML 和 CSS snippets:

* {
  box-sizing: border-box;
}

table {
  table-layout: fixed;
  border-collapse: collapse;
  width: 100%;
  max-width: 100px;
}

td {
  background: #F00;
  padding: 20px;
  overflow: hidden;
  white-space: nowrap;
  width: 100px;
  border: solid 1px #000;
}

在此示例中，表格元素的固定最大宽度为 100px，并且 元素的宽度为 100px。单元格内的文本现在将隐藏在指定宽度之外。

以上是为什么'overflow:hidden”对元素不起作用，如何修复它？的详细内容。更多信息请关注PHP中文网其他相关文章！