要素で「overflow: hidden」が機能しないのはなぜですか?それを修正するにはどうすればよいですか?

オーバーフロー: 非表示が

で機能しない理由

オーバーフロー: 非表示は、要素内のオーバーフロー コンテンツを非表示にするためによく使用されます。ただし、

に適用すると、

この問題を解決するには、次の 2 つの追加 CSS プロパティが必要です:
table-layout:fixed
• - このプロパティにより、テーブルの幅が固定され、個々のセルがそれを超えて拡大しないことが保証されます。 it.
white-space: nowrap

- このプロパティは、テキストが複数行にまたがるのを防ぎ、指定されたセル幅内に収まるようにします。

例:

This_is_a_terrible_example_of_thinking_outside_the_box.

次の HTML と CSS を考えてみましょう。スニペット:

* {
  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;
}

この例では、table 要素の最大幅は 100 ピクセルに固定されており、 要素の幅は 100px です。セル内のテキストは、指定された幅を超えると非表示になります。

以上が要素で「overflow: hidden」が機能しないのはなぜですか?それを修正するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。