ホームページ  >  記事  >  ウェブフロントエンド  >  Flexbox は Overflow-Wrap: Break-Word の動作にどのような影響を与えますか?

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

Linda Hamilton
Linda Hamiltonオリジナル
2024-10-31 09:17:29453ブラウズ

How Does Flexbox Affect the Behavior of 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。