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

Rachel Andrew

發布日期：2026 年 1 月 14 日

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

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

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

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

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

提供清晰的閱讀體驗

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

列規則即將推出

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