フレックスレイアウトの下のテキストは省略されていますが、コンテナは開かれていますか？それを解決する方法は？

コンテナの拡張を引き起こすフレックスレイアウトの下でのテキストオーバーフローの省略のためのソリューション

フレックスレイアウトを使用する場合、この状況に遭遇することがよくあります。左要素の幅が固定され、適切な要素が残りのスペースに適応します。ただし、Ellipsisスタイル（ text-overflow: ellipsis ）を適切なテキストに追加すると、コンテナが誤って開き、ページレイアウトが破壊されます。この記事では、原因を分析し、ソリューションを提供します。

問題：フレックスコンテナには、画像（固定幅）とテキスト（適応型の残りスペース）が含まれています。テキスト省略スタイルを追加した後、コンテナの幅は期待を超え、利用可能なスペース（100VW）を完全には占有しません。楕円は無効です。これは、省略が設定されていても、ブラウザが完全なコンテンツを表示するのに十分なスペースを割り当て、コンテナを開いたままにするためです。

根本的な原因は、フレックスレイアウトのデフォルト動作です。子供はコンテンツに基づいてスペースを開きます。最小幅は長いテキストに限定されず、 text-overflow: ellipsisが使用されていても、フレックスコンテナはテキストの実際のコンテンツに基づいて幅を計算します。

解決策： min-width: 0;テキストを含む要素へのスタイル。このスタイルは、テキスト要素の最小幅を0にします。テキストが長すぎても、コンテナ幅の計算には影響しません。フレックスコンテナは、残りのスペースに従って幅を割り当て、予想される適応レイアウトを実現しますが、テキストオーバーフローパーツは正しく省略されます。これにより、フレックスレイアウト下でのテキストオーバーフローの省略によって引き起こされるコンテナ拡張の問題を完全に解決し、適応幅とテキストの隠れの予想される効果を達成できます。

以上がフレックスレイアウトの下のテキストは省略されていますが、コンテナは開かれていますか？それを解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。