支援多欄版面配置中的換行欄

發布日期:2026 年 1 月 14 日

Chrome 145 開始支援 多欄版面配置層級二規格column-wrapcolumn-height 屬性。 這些屬性可讓您在區塊方向將欄位換行至新列。

在 Chrome 145 之前,如果多欄容器的高度受到限制,不適合可用空間的內容會以溢位欄的形式顯示在內嵌方向。這會在網頁上建立水平捲軸。

您可以使用 column-heightcolumn-wrap 屬性,為欄列設定高度,並將溢位欄設為顯示在新列中。

您可以建立新的資料欄列,解決目前的問題:使用者必須上下捲動才能閱讀資料欄,或是在內容量無法預測的情況下,可能出現水平捲軸。

此外,它還能啟用區塊方向輪轉介面等模式,建立填滿可用檢視區塊高度的資料欄。如要讀取下一列欄,請在方塊方向捲動至下一個畫面。

提供清晰的閱讀體驗

如果資料欄有多列,可能會造成閱讀體驗不清楚,讀者不會發現有多列,並跳過間距繼續閱讀資料欄。這是使用者介面設計時應考量的事項。即將推出的功能可讓您在列間距中新增裝飾,進一步區分視覺效果。

列規則即將推出

多欄層級 1 規格包含用於設定 column-rule 樣式的屬性;這項規則會放在欄之間的間隙。新的 CSS 間距裝飾規格包含用於設定列規則樣式的屬性,目前正處於開發人員試用階段。這項功能穩定後,您就能在格線、Flexbox 和多欄中新增列和欄規則。