ホームページ  >  記事  >  ウェブフロントエンド  >  フレックスボックス コンテナ内で使用すると、「overflow-wrap: Break-word」が期待どおりに動作しないのはなぜですか?

フレックスボックス コンテナ内で使用すると、「overflow-wrap: Break-word」が期待どおりに動作しないのはなぜですか?

Mary-Kate Olsen
Mary-Kate Olsenオリジナル
2024-11-02 10:04:30873ブラウズ

Why doesn't `overflow-wrap: break-word` work as expected when used within a flexbox container?

フレックスボックスはオーバーフローラップ動作に影響します

質問:

次のコードで、オーバーフローラッププロパティが影響を受けるのはなぜですか? display: flex と組み合わせると期待どおりに動作しません?

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

<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 fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    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>

回答:

display: flex をラップ要素に追加すると、フレックスボックス コンテナーになります。デフォルトでは、フレックスボックス コンテナ内の要素は 1 行に配置されます。ただし、フレックスボックスの子要素の min-width プロパティはデフォルトで auto に設定されているため、コンテンツを保持するために必要な最小幅が占有されます。

提供されたコードでは、これは要素 a と b がコンテンツに合わせて引き伸ばされます。要素 b には非常に長いテキスト コンテンツがあるため、水平スクロールバーが強制的に表示されます。

この問題を解決するには、要素 b の min-width を 0 に設定します。これにより、要素 b を縮小してフィットさせることができます。そのコンテンツを削除し、水平スクロールバーを削除します。

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

.b {
  min-width: 0;
}

<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 fffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff
    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>

以上がフレックスボックス コンテナ内で使用すると、「overflow-wrap: Break-word」が期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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