首頁 > web前端 > css教學 > 主體

為什麼在 Flexbox 容器中使用「overflow-wrap:break-word」時,它不能如預期運作?

Mary-Kate Olsen
發布: 2024-11-02 10:04:30
原創
872 人瀏覽過

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

Flexbox 影響Overflow-Wrap 行為

問題:

在下面的程式碼中,為什麼Overflow-Wrap 屬性會發生變化與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 加到wrap元素時,它就變成了flexbox容器。預設情況下,Flexbox 容器內的元素在一行中對齊。然而,flexbox 子元素的 min-width 屬性預設為 auto,導致它們佔據容納其內容所需的最小寬度。

在提供的程式碼中,這意味著元素 a 和 b 是拉伸以適應其內容。由於元素 b 的文字內容很長,因此會強制出現水平捲軸。

要解決此問題,可以將元素 b 的最小寬度設為 0。這將允許其縮小以適應其內容並消除水平捲軸。

.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>
登入後複製

以上是為什麼在 Flexbox 容器中使用「overflow-wrap:break-word」時,它不能如預期運作?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!