Flexbox は Overflow-Wrap: Break-Word の動作にどのような影響を与えますか?

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

CSS 要素へのフレックスボックスの導入により、オーバーフローラップ: ブレークワードの動作が変更される可能性があります。 overflow-wrap:break-word を要素に適用すると、フレックスボックスはデフォルトで要素を 1 行に再編成します。

ただし、フレックスボックスの子プロパティのデフォルトの min-width は auto であるため、a や b などの要素がこの例では、コンテンツに基づいて最小幅を保持しています。水平スクロールバーを排除するには、min-width プロパティを調整できます。

<code class="css">.b {
  min-width: 0;
}</code>

min-width を 0 に設定すると、コンテンツが自然に流れるようになり、水平スクロールバーをトリガーせずに改行が期待どおりに機能できるようになります。

デモンストレーション用に変更された例を次に示します:

<code class="html"><div class="wrap">
  <div class="a">
    first div
  </div>
  <div class="b">
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal animal
    animal animal animal animal animal animal animal animal animal animal animal animal
  </div>
</div></code>

<code class="css">.wrap {
  overflow-wrap: break-word;
  display: flex;
}

.b {
  min-width: 0;
}</code>

以上がFlexbox は Overflow-Wrap: Break-Word の動作にどのような影響を与えますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。