私のテーブルのセル () で「overflow: hidden」が機能しないのはなぜですか?

オーバーフローが で動作しない: CSS 修正

Overflow:hidden が

で期待どおりに動作しない可能性があります;要素が含まれるため、制約のないテキストがセルの意図した幅を超えてオーバーフローする可能性があります。この問題を解決するには、関連する CSS プロパティをさらに詳しく調べる必要があります。

問題の核心は、テーブル要素のデフォルトの動作にあります。表では通常、セルの幅が内容に応じて拡大または縮小する流動的なレイアウトが使用されます。これをオーバーライドするには、固定テーブル レイアウトを指定する必要があります:

table {
  table-layout: fixed;
}

さらに、テーブル コンテナーに固定幅を設定すると、テーブル セルで使用できる全体のサイズが制限されます:

table {
  ...
  width: 200px;  

最後に、セルの内容を実際に制限するために、表のセルに overflow:hidden を適用し、単語を防ぐためにwhite-space: nowrapを適用します。 Wrap:

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

これらの調整を組み合わせることにより、テキスト コンテンツがセルの端で切り詰められ、オーバーフローが防止されます。

例

次の変更された例を考えてみましょう:

さて、必要に応じて、テキストはセル幅 100 ピクセルで切り取られます。

以上が私のテーブルのセル () で「overflow: hidden」が機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。