Flexbox は「overflow-wrap」の動作にどのような影響を与えますか?また、それを修正するにはどうすればよいですか?

オーバーフローラップ動作に対するフレックスボックスの影響

CSS では、overflow-wrap プロパティにより、テキストが複数行に分割されることが有効になります。改行文字。これにより、より柔軟なテキスト レイアウトが可能になり、長い行がコンテナからオーバーフローするのを防ぎます。ただし、display: flex プロパティと組み合わせると、overflow-wrap は予期しない動作を示す可能性があります。

Issue:

次のスニペットを考えてみましょう。ここで、overflow-wrap: Break -word は、2 つの子要素を持つコンテナに適用されます:

<div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal 
    ... (very long text)
  </div>
</div>

overflow-wrap が有効な場合、2 番目の子要素のテキストは期待どおり複数行に分割されます。ただし、display: flex がコンテナに追加されると、overflow-wrap 設定にもかかわらず水平スクロールバーが表示されます。

解決策:

水平スクロールバーを排除するには、フレックスボックス子要素のデフォルトの min-width プロパティをオーバーライドする必要があります。 min-width を 0 に設定すると、子要素の幅がコンテンツに合わせて縮小され、コンテナからはみ出すことがなくなります。

.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}

この調整により、2 番目の子要素の長いテキストが折り返されます。水平スクロールバーを発生させずに複数行に分割できます。これは、display: flex が他の CSS プロパティの動作に影響を与える可能性がある一方で、overflow-wrap と組み合わせて使用​​して目的のテキスト レイアウトを実現できることを示しています。

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