首頁 > web前端 > css教學 > 為什麼 IE11 Flex 容器中的文字不換行,如何修復它?

為什麼 IE11 Flex 容器中的文字不換行,如何修復它?

Susan Sarandon
發布: 2024-12-25 08:42:18
原創
815 人瀏覽過

Why Doesn't Text Wrap in IE11 Flex Containers, and How Can I Fix It?

IE11 中的Flex 容器換行問題:解決方案和解決方法

使用Flex 容器對齊文字元素時,我們發現文字中Chrome 和IE11 中的換行行為有所不同。具體來說,在 IE11 中,Flex 容器內的文字無法換行,導致溢出。

已知錯誤和解決方法

這確實是 IE11 中的已知錯誤。若要解決此問題,需要明確指定 Flex 容器內子元素的寬度。將以下CSS 規則加入您的程式碼應該可以解決換行問題:

.child {
  width: 100%;
}
登入後複製

替代解決方法

替代解決方法包括使用flex-basis: 100 % 或flex: 1 在子元素上。這些選項還強制 IE11 了解並尊重 Flex 容器內區塊級子元素的預期全寬佔用。

範例

.child {
  flex-basis: 100%;
}
登入後複製

說明

IE11 需要明確寬度聲明來辨識子元素應佔據父Flex 容器內的全部可用空間。相較之下,即使沒有明確聲明,Chrome 也會表現出預期的換行行為。

以上是為什麼 IE11 Flex 容器中的文字不換行,如何修復它?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板