「text-overflow: ellipsis」が Flex コンテナで機能しないのはなぜですか?

フレックス レイアウトでのテキスト オーバーフローによるテキストの切り捨て

フレックス コンテナーでテキストを切り捨てるために text-overflow: ellipsis を実装すると、多くの場合、省略記号がありません。これは、フレックスボックスを使用しない同じコードと結果を比較すると明らかです。

CSS コード:

.flex-container {
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  text-align: left;
}

HTML コード:

<h1>Flexible Boxes</h1>
<div class="flex-container">

観察済み問題:

テキストが "ThisIsASam..." に切り詰められるはずの予期した結果が得られません。代わりに、出力には "ThisIsASamp " が表示されます。

原因:

この問題は、text-overflow プロパティを親コンテナではなくフレックスの子に適用する必要があるために発生します。 。これは、親コンテナにテキストが 1 行あり、切り詰める必要がないためです。

解決策:

この問題を解決するには、別のクラスを使用する必要があります。子が切り捨てを制御するための。

CSSコード:

.flex-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

このアプローチにより、親コンテナが目的のレイアウトを維持しながら、フレックスの子がテキストの切り詰めに必要なスタイルを確実に持つことができます。

以上が「text-overflow: ellipsis」が Flex コンテナで機能しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。