文字自動分欄
在編排處理大量文字時，有時會使用「不同欄位」來讓版面更為簡潔，透過 CSS 的 columns、column-count、column-width、column-rule 等「文字自動分欄」的樣式屬性，可以在不使用任何額外元素的狀況下，將文字拆分成不同欄位，這篇教學會介紹相關用法。
快速導覽：
column-count 根據數量自動分欄
column-count 樣式屬性可以設定文字自動分欄時的「欄位數量」，沒有繼承特性，使用「無單位數字」作為屬性值，表示一段文字要「分成幾個欄位」，預設值 auto ( 等同 1 )，下方範例會將同一段文字，分成 2～4 個欄位，從中也可以看出如果使用 text-align: center 水平置中樣式，所有欄位的文字都會一併水平置中。
<!-- HTML 程式碼 -->
<h3>column-count: 2;</h3>
<div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-count: 3;</h3>
<div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-count: 4;</h3>
<div class="c">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 400px;
border: 1px solid #000;
margin: 10px 10px 30px;
font-size: 14px;
text-align: center; /* 文字水平置中對齊 */
}
.a {column-count: 2;} /* 自動分兩欄 */
.b {column-count: 3;} /* 自動分三欄 */
.c {column-count: 4;} /* 自動分四欄 */
</style>
column-width 根據寬度自動分欄
column-width 樣式屬性可以設定文字自動分欄時的「x欄位寬度」，沒有繼承特性，使用「長度單位數字」作為屬性值，預設值 auto，下方範例會將同一段文字，根據每個欄位寬度 50px、100px 和 150px 進行自動分欄，由於每個欄位包含「間隔空間」，所以如果寬度 400px 的元素根據欄位寬度 100px 進行分欄，只會分出三個欄位。
<!-- HTML 程式碼 -->
<h3>column-width: 50px;</h3>
<div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-width: 100px;</h3>
<div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-width: 150px;</h3>
<div class="c">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<!-- CSS 程式碼 -->
<style>
div {
width: 400px;
border: 1px solid #000;
margin: 10px 10px 30px;
font-size: 14px;
}
.a {column-width: 50px;} /* 每欄 50px 自動分欄 */
.b {column-width: 100px;} /* 每欄 100px 自動分欄 */
.c {column-width: 150px;} /* 每欄 150px 自動分欄 */
</style>
columns 文字自動分欄縮寫格式
columns 樣式屬性是 column-width 和 column-count 兩個樣式屬性的縮寫格式，沒有繼承特性，具有一個「長度單位數值」和一個「無單位數字」，可以擇一使用或兩個一起使用，如果同時使用了寬度和數量，會使用計算後欄位最大值作為欄位寬度和分欄後的數量。下方範例會展示單純使用數字、單純使用寬度以及數字寬度互相搭配的差異。
<!-- HTML 程式碼 -->
<h3>columns: 3;</h3>
<div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>columns: 50px;</h3>
<div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>columns: 3 50px;</h3>
<div class="c">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>columns: 3 150px;</h3>
<div class="d">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<!-- CSS 程式碼 -->
<style>
h3 {margin: 0 10px;}
div {
width: 400px;
border: 1px solid #000;
margin: 10px 10px 20px;
font-size: 13px;
}
.a {columns: 3;} /* 分成三欄 */
.b {columns: 50px;} /* 使用欄位寬度 50px 分成六欄 */
.c {columns: 3 50px;} /* 如果使用 50px 分成 6 欄，因為 6>3，就分成三欄 */
.d {columns: 3 150px;} /* 如果使用 150px 分成 2 欄，因為 2<3，就分成二欄 */
</style>
column-rule-style 自動分欄隔線樣式
column-rule-style 樣式屬性可以設定文字自動分欄時的「隔線樣式」，沒有繼承特性，使用和邊框同樣的關鍵字作為屬性值，下方列出相關關鍵字：
| 樣式關鍵字 | 說明 |
|---|---|
| none | 沒有邊框 ( 預設值 )。 |
| hidden | 隱藏邊框。 |
| solid | 實線。 |
| double | 雙實線，雙實線的總寬度為邊框的寬度。 |
| dotted | 圓點虛線，圓點直徑等於寬度，圓點間隔根據瀏覽器自行定義。 |
| dashed | 方形虛線，長度與間隔根據瀏覽器自行定義。 |
| groove | 凹槽雕刻效果邊框。 |
| ridge | 浮雕效果邊框。 |
| inset | 陷入效果邊框。 |
| outset | 突起效果邊框。 |
下方範例展示四種不同分隔線樣式的差異。
<!-- HTML 程式碼 -->
<h3>column-rule-style: solid;</h3>
<div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule-style: dashed;</h3>
<div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule-style: dotted;</h3>
<div class="c">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule-style: double;</h3>
<div class="d">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<!-- CSS 程式碼 -->
<style>
h3 {margin: 0 10px;}
div {
width: 400px;
border: 1px solid #000;
margin: 10px 10px 20px;
font-size: 13px;
columns: 3;
}
.a {column-rule-style: solid;}
.b {column-rule-style: dashed;}
.c {column-rule-style: dotted;}
.d {column-rule-style: double;}
</style>
column-rule-color 自動分欄隔線顏色
column-rule-color 樣式屬性可以設定文字自動分欄時的「隔線顏色」，沒有繼承特性，使用「顏色單位」或「色彩模型」數值作為屬性值，預設值為瀏覽器預設框線顏色，下方範例展示用四種不同的顏色表示方式來呈現紅色分隔線 ( 需搭配 column-rule-style 才會出現隔線 )。
<!-- HTML 程式碼 -->
<h3>column-rule-color: red;</h3>
<div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule-color: #f00;</h3>
<div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule-color: rgb(255,0,0);</h3>
<div class="c">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule-color: hsl(0, 100%, 50%);</h3>
<div class="d">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<!-- CSS 程式碼 -->
<style>
h3 {margin: 0 10px;}
div {
width: 400px;
border: 1px solid #000;
margin: 10px 10px 20px;
font-size: 13px;
columns: 3;
column-rule-style: solid; /* 使用實心隔線 */
}
.a {column-rule-color: red;}
.b {column-rule-color: #f00;}
.c {column-rule-color: rgb(255,0,0);}
.d {column-rule-color: hsl(0, 100%, 50%);}
</style>
column-rule-width 自動分欄隔線寬度
column-rule-width 樣式屬性可以設定文字自動分欄時的「隔線寬度」，沒有繼承特性，預設值為關鍵字 medium，除了使用關鍵字 thin ( 細 )、medium ( 中 )、thick ( 粗 ) 作為關鍵字，也可使用「長度單位」數值作為屬性值，下方範例展示用四種寬度的分隔線 ( 需搭配 column-rule-style 才會出現隔線 )。
<!-- HTML 程式碼 -->
<h3>column-rule-width: thin;</h3>
<div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule-width: medium;</h3>
<div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule-width: thick;</h3>
<div class="c">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule-width: 20px;</h3>
<div class="d">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<!-- CSS 程式碼 -->
<style>
h3 {margin: 0 10px;}
div {
width: 400px;
border: 1px solid #000;
margin: 10px 10px 20px;
font-size: 13px;
columns: 3;
column-rule-style: solid; /* 使用實心隔線 */
}
.a {column-rule-width: thin;}
.b {column-rule-width: medium;}
.c {column-rule-width: thick;}
.d {column-rule-width: 20px;}
</style>
column-rule 自動分欄隔線縮寫格式
column-rule 樣式屬性是 column-rule-width、column-rule-color 和 column-rule-style 三個樣式屬性的縮寫格式，沒有繼承特性，具有一個「長度單位數值」、一個「顏色單位數值」和一個「樣式關鍵字」，可以選擇一個、兩個或三個一起使用，下方範例會展示相關用法。
<!-- HTML 程式碼 -->
<h3>column-rule: solid thick red;</h3>
<div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule: dashed 2px green;</h3>
<div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule: solid orange;</h3>
<div class="c">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-rule: double 10px red;</h3>
<div class="d">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<!-- CSS 程式碼 -->
<style>
h3 {margin: 0 10px;}
div {
width: 400px;
border: 1px solid #000;
margin: 10px 10px 20px;
font-size: 13px;
columns: 3;
}
.a {column-rule: solid thick red;}
.b {column-rule: dashed 2px green;}
.c {column-rule: solid orange;}
.d {column-rule: double 10px red;}
</style>
column-span 文字自動分欄標題
column-span 樣式屬性是針對「子元素」的樣式屬性，可以設定文字自動分欄時「標題是否分欄」，沒有繼承特性，預設值為關鍵字 none 表示標題一起分欄，下方範例展示兩種標題分欄差異
<!-- HTML 程式碼 -->
<h3>.a h4{column-span: none;}</h3>
<div class="a">
<h4>STEAM 教育學習網</h4>
<p>STEAM 教育學習網是一個針對 STEAM 教育所設立的網站</p>
<h4>動機與目標</h4>
<p>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</p>
</div>
<h3>.b h4 {column-span: all;}</h3>
<div class="b">
<h4>STEAM 教育學習網</h4>
<p>STEAM 教育學習網是一個針對 STEAM 教育所設立的網站</p>
<h4>動機與目標</h4>
<p>目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</p>
</div>
<!-- CSS 程式碼 -->
<style>
h3 {margin: 0 10px;}
div {
width: 400px;
border: 1px solid #000;
margin: 10px 10px 20px;
font-size: 13px;
columns: 3;
}
h4 {background: pink;}
.a h4{column-span: none;}
.b h4 {column-span: all;}
</style>
column-fill 文字自動分欄方式
column-fill 樣式屬性可以設定文字自動分欄時「分欄方式」，沒有繼承特性，預設值為關鍵字 balance 表示欄位平均分配，如果設定為 auto 表示分欄後僅佔用其所需的空間，可能會導致某些欄位保持空白，下方範例展示兩種分欄方式的差異。
<!-- HTML 程式碼 -->
<h3>column-fill: auto;</h3>
<div class="a">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<h3>column-fill: balance;</h3>
<div class="b">STEAM 教育學習網是一個針對 STEAM 教育所設立的網站，目標整合各種程式、科學、科技、工藝或設計相關的基礎知識。隨著資訊科技進步以及「後疫情」時代的來臨，「自學」的趨勢也日益盛行，透過這個網站，除了紀錄我自己的學習歷程，更可以將目前正夯的新知或技術，分享給所需要的大朋友小朋友，希望對於想要自學的學生、家長或老師有所幫助。</div>
<!-- CSS 程式碼 -->
<style>
h3 {margin: 0 10px;}
div {
width: 400px;
border: 1px solid #000;
margin: 10px 10px 20px;
font-size: 13px;
columns: 3;
}
.a {column-fill: auto;}
.b {column-fill: balance;}
</style>
小結
這篇教學所介紹的文字自動分欄樣式屬性，主要針對大量文字「分欄」的需求，可以在不撰寫額外網頁元素的狀態下，進行基本的分欄排版效果。
意見回饋
如果有任何建議或問題，可傳送「意見表單」給我，謝謝～