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

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

Susan Sarandon
Susan Sarandon原創
2024-12-25 08:42:18898瀏覽

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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn