「text-overflow」が Flexbox で機能しないのはなぜですか?それを修正するにはどうすればよいですか?

Flex Display でテキスト オーバーフローが機能しないのはなぜですか?

CSS では、テキストが超過した場合にテキスト オーバーフロー プロパティを使用してテキストが切り捨てられます。コンテナの利用可能な幅。ただし、display: flex と一緒に使用すると、期待どおりに動作しない可能性があります。

次のコードを検討してください。

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

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

この例では、flex-container はflexbox コンテナーであり、その子 div 内のテキストは切り詰められることが予想されます。ただし、次の結果が発生する可能性があります。

Output: ThisIsASamp  
Expected: ThisIsASam...

display: flex プロパティを削除すると、テキストの切り捨ては期待どおりに機能します。では、何が問題なのでしょうか?

問題は、display:flex がコンテナ内のスペースを分配する方法にあります。フレックスを使用しない場合、テキストは利用可能な幅に押し込まれ、それに応じて切り詰められます。ただし、フレックスが適用されると、子要素 (div) はフレックス アイテムになり、コンテナのフレックスボックス プロパティを継承します。

これに対処するには、子要素を明示的にスタイル設定してテキストを切り詰める必要があります。これを実現する 1 つの方法は、フレックスの子に別のクラスを作成し、適切なスタイルを適用することです。

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

これらのスタイルを子要素に適用すると、子要素がテキストを折り返して切り捨てることが保証されます。フレックスボックスコンテナ内であっても必要です。

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