文字自动分栏

在编排处理大量文字时，有时会使用“不同字段”来让版面更为简洁，透过 CSS 的 columns、column-count、column-width、column-rule 等“文字自动分栏”的样式属性，可以在不使用任何额外元素的状况下，将文字拆分成不同字段，这篇教学会介绍相关用法。

快速导览：

• column-count 根据数量自动分栏
• column-width 根据宽度自动分栏
• columns 文字自动分栏缩写格式
• column-rule-style 自动分栏隔线样式
• column-rule-color 自动分栏隔线颜色
• column-rule-width 自动分栏隔线宽度
• column-rule 自动分栏隔线缩写格式
• column-span 文字自动分栏标题
• column-fill 文字自动分栏方式

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

前往：https://www.youtube.com/@steam.oxxostudio

column-count 根据数量自动分栏

column-count 样式属性可以设定文字自动分栏时的“字段数量”，没有继承特性，使用“无单位数字”作为属性值，表示一段文字要“分成几个字段”，默认值 auto ( 等同 1 )，下方范例会将同一段文字，分成 2～4 个字段，从中也可以看出如果使用 text-align: center 水平置中样式，所有字段的文字都会一并水平置中。

线上展示：https://codepen.io/oxxo/pen/KwPXLbJ

<!-- 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 样式属性可以设定文字自动分栏时的“字段宽度”，没有继承特性，使用“长度单位数字”作为属性值，不支援百分比、em 数值，默认值 auto，下方范例会将同一段文字，根据每个字段宽度 50px、100px 和 150px 进行自动分栏，由于每个字段包含“间隔空间”，所以如果宽度 400px 的元素根据字段宽度 100px 进行分栏，只会分出三个字段。

线上展示：https://codepen.io/oxxo/pen/JjqrxzY

<!-- 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 两个样式属性的缩写格式，没有继承特性，可以使用一个“长度单位数值”( 宽度 )或一个“无单位数字”( 数量 )，或将两个一起使用，但如果同时使用了宽度和数量，会使用计算后字段最大值作为字段宽度和分栏后的数量。下方范例会展示单纯使用数字、单纯使用宽度以及数字宽度互相搭配的差异。

线上展示：https://codepen.io/oxxo/pen/MYgEdZM

<!-- 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 样式属性可以设定文字自动分栏时的“隔线样式”，没有继承特性，使用和边框同样的关键字作为属性值，下方列出相关关键字：

下方范例展示四种不同分隔线样式的差异。

线上展示：https://codepen.io/oxxo/pen/emOGaxO

<!-- 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 才会出现隔线 )。

线上展示：https://codepen.io/oxxo/pen/EaYwzrV

<!-- 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 才会出现隔线 )。

线上展示：https://codepen.io/oxxo/pen/xbKXNMV

<!-- 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 三个样式属性的缩写格式，没有继承特性，可以使用一个“长度单位数值”、一个“颜色单位数值”或一个“样式关键字”，除了可只使用一个，也可以两个或三个一起使用，下方范例会展示相关用法。

线上展示：https://codepen.io/oxxo/pen/ogvGRmB

<!-- 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 表示标题一起分栏，设定 all 表示标题不分栏，下方范例展示两种标题分栏差异

线上展示：https://codepen.io/oxxo/pen/gbYGJqv

<!-- 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 表示分栏后仅占用其所需的空间，可能会导致某些字段保持空白，下方范例展示两种分栏方式的差异。

线上展示：https://codepen.io/oxxo/pen/ByBweMV

<!-- 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>

小结

这篇教学所介绍的文字自动分栏样式属性，主要针对大量文字“分栏”的需求，可以在不撰写额外网页元素的状态下，进行基本的分栏排版效果。

意见反馈