Flexbox 如何影響 Overflow-Wrap: Break-Word 的行為？

Flexbox 對溢位換行行為的影響

Flexbox 對 CSS 元素的介紹可以改變溢位換行的行為：break-word。當應用於帶有overflow-wrap:break-word的元素時，flexbox預設將其重新組織成一行。

但是，flexbox子屬性的預設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中文網其他相關文章！