column-count

如何只用CSS讓段落文字分欄

在撰寫文章段落的時候,通常都是單欄的到底,但是在一些網站,或許是行銷編排,抑或是因為版面的關係,有時會想把段落或是列表(<li>)分成多欄呈現,這時候如果要因為這樣再用其他<div>去包,其實對後續維護及文案改動,都是非常麻煩的,今天介紹一個我很挺喜歡的CSS屬性,可以透過CSS屬性來解決這問題,又何樂而不為呢?

我們先來看一下範例,一般的單欄區塊會是這樣(如下圖)

 

使用簡單的CSS屬性,就變成了這樣!

 

接下來,就讓我來介紹一下這個屬性

column-count
可以依據需求來將欄位分成雙欄、三欄甚至更多,填入要欄位數量即可,例如
column-count:2

column-width
除了定義欄位數量,也可以定義欄位的寬度,要注意的是這與上面的屬性只能擇一使用

再來是由這兩個屬性延伸出來的,可以定義欄位間距、色彩等等,介紹幾個我自己常用到的

column-gap
欄位間的間距

column-break-inside
可決定文字的換欄方式
auto: 自動
avoid: 文字段落後換欄

column-rule-style
可以設定欄位間border style

 

這個屬性適用範圍很廣,也許能解決一些意想不到的狀況,大家趕緊雙擊加關注吧!

 

留言
回到頂端