「text-overflow: ellipsis」が Flexbox で期待どおりに動作しないのはなぜですか?

text-overflow が Flexbox で動作しない

この例では、テキスト コンテンツ「ThisIsASampleText」を含むフレックス コンテナがあります。 「display」プロパティを「flex」に設定し、「text-overflow」を「ellipsis」に設定すると、テキストが切り詰められることが期待されますが、意図したとおりに動作しません。

コードを検査すると、次のことがわかります。 flex プロパティがコンテナ要素に適用されること。ただし、レイアウトとプロパティに影響を与えるには、フレックスボックス スタイルを子要素に適用する必要があります。

この問題を解決するには、「テキスト オーバーフロー」と関連スタイルをフレックスの子の別のクラスに移動します。変更されたコードは次のとおりです。

.flex-container {<br> display: flex;<br> text-align: left;<br>}</p>
<p>.flex-child {<br> ホワイトスペース: nowrap;<br> オーバーフロー: 非表示;<br> テキスト オーバーフロー: ellipsis;<br>}</p>
<p><h1>フレキシブルボックス</h1><br><div><span class="flex-child">ThisIsASampleText</span><br></div>

切り捨てスタイルを「.flex-child」クラスに適用することで、フレックスコンテナ内のテキストを「ThisIsASam...」に正しく切り詰めます。詳細な説明については、以下にリンクされている CSS Tricks の参考記事を参照してください。

参考: https://css-tricks.com/flexbox-truncated-text/

以上が「text-overflow: ellipsis」が Flexbox で期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。