為什麼「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中文網其他相關文章！