CSS - column-span - とほほのWWW入門

属性名	column-span
値	none \| all
初期値	none
適用可能要素	ブロックレベル要素(float:left\|right, position:absolute のものを除く)
継承	継承しない
メディア	Visual

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	10	未	?(-webkit)	11.1	?(-webkit)

マルチカラムの中に章題を記載する時など、その要素がすべてのカラムをまたいで表示させるか否かを指定します。

値	説明
none	カラムをまたぎません。(初期値)
auto	すべてのカラムをまたいで表示します。

CSS

.multicol {
  columns: 3;
}
.multicol h3 {
  -webkit-column-span: all;
  -moz-column-span: all;
  column-span: all;
  background-color: #ccf;
}

HTML

<div class="multicol">
いろはにほへとちりぬるを...
<h3>タイトル</h3>
あいうえおかきくけこ...
</div>

表示

いろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすんいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすんいろはにほへとちりぬるをわかよたれそつねならむうゐのおくやまけふこえてあさきゆめみしゑひもせすん

あいうえおかきくけこさしすせそたちつてどなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてどなにぬねのはひふへほまみむめもやゆよわをんあいうえおかきくけこさしすせそたちつてどなにぬねのはひふへほまみむめもやゆよわをん

CSS - column-span