Flexbox は「overflow-wrap:break-word」の動作にどのような影響を与えますか?

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

CSS の領域では、プロパティのオーバーフローラップと表示が相互作用してテキストの動作を制御します。ラッピングと溢れ出るコンテンツ。特定のシナリオで観察される興味深い癖を調べてみましょう。

次のコード スニペットを考えてみましょう。

<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 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></code>

overflow-wrap: Break-word が適用され、2 番目の div 内のテキストが .最初のスニペットで示したように、b は複数の行に分割する必要があります。

ただし、ラップ コンテナーに display: flex を追加すると、事態は予期せぬ展開になります。

<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 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></code>

これではこのシナリオでは、水平スクロールバーが表示され、特定の点を超えるとテキストが読めなくなります。 overflow: hidden に頼らずにこの動作を修正するにはどうすればよいでしょうか?

解決策は、flexbox がその子にどのような影響を与えるかを理解することにあります。デフォルトでは、コンテナに display: flex がある場合、その子要素は flex-direction プロパティに応じて行または列に自動的に配置されます。

この場合、display: flex がラップに適用されると、コンテナーでは、予想どおり、a および b div が水平にレイアウトされます。ただし、フレックスボックスの子の min-width プロパティはデフォルトで auto に設定されています。これは、各 div がそのコンテンツを収容するために必要な最小幅を占めることを意味します。

問題を解決するには、min-width を明示的に設定する必要があります。 b div を 0:

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

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

これにより、b div がコンテナの利用可能な幅に合わせて拡張できるようになり、水平スクロールバーがなくなり、意図したとおりにテキストを複数行に分割できるようになります。 .

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