Flexbox 如何影響「overflow-wrap：break-word」行為？-css教學-PHP中文網

Flexbox 如何影響「overflow-wrap：break-word」行為？

Patricia Arquette

發布： 2024-10-29 03:23:29

原創

625 人瀏覽過

How Does Flexbox Affect `overflow-wrap: break-word` Behavior?

Flexbox 對Overflow-Wrap 的影響

在CSS 領域，overflow-wrap 和display 屬性相互作用來控製文本的行為包裹和行為溢出的內容。讓我們探索在特定場景中觀察到的一個有趣的怪癖。

考慮以下程式碼片段：

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

登入後複製

應用了溢位換行：斷字，第二個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 按預期水平佈局。然而，flexbox 子元素的 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中文網其他相關文章！