紙媒体のようなテキストの流し込み

雑誌のようにカラムにまたがってテキストを表示させたいときにうってつけのcssがあるのは知っていますか？

それが「columns」です。

Columns

このプロパティは、幅と段組みの個数によって構成されています。

• Column-width：初期値 auto
• column-cou：初期値 auto

この２つを設定しても、がっちりそのままで表示されるわけでなく、どちらかの再現できる方が優先されるようです。

書き方

columns: 列の幅の値  列の数の値;

※省略した場合は、初期値が適用されます。

コード例

0.5倍くらいにするか、別ウインドで見ると分かりやすいと思います。

See the Pen columns by 山本直樹 (@gvopdzwc-the-vuer) on CodePen.

分かりやすいように、ブロックをボーダーで囲ってみました。

よく紙媒体で見るレイアウトは、CodePen内の「テキストを分割」を見ていただければいいかなと思います。

テキストのみではなくブロック要素ではどうなるか試してみました。それが、「ブロックを分割」です。

分割のアルゴリズムが今ひとつわかりませんが、ブロック要素を無視して分割されてしまいました。

そこで、調べたところ以下の記述をすることで、ブロック要素内での分割を避けることができるようです。

page-break-inside: avoid;

break-inside: avoid;

それが、最後に記述した「ロックを分割（途中で段落移動しない）」です。

最後に

Flexやgridでやるよりも少ないコードで表現できるのはいいかと思います。

ただ、ブラウザ任せの部分が多いので、その点注意が必要です。