CSS - column-wrap
概要
| 属性名 | column-wrap |
|---|---|
| 値 | auto | nowrap | wrap |
| 初期値 | auto |
| 適用可能要素 | マルチカラムコンテナ |
| 継承 | 継承しない |
| 仕様書 | https://drafts.csswg.org/css-multicol-2/#cwr |
| サポート | https://caniuse.com/mdn-css_properties_column-wrap |
説明
column-count で段組みを行う際、高さ制限を超えた場合の挙動を制御します。2026年2月の Chrome 145 でサポートされました。現時点(2026年2月)では、Firefox や Safari は未対応です。
- auto
column-heightがautoの時はwrap、それ以外の時はnowrapとして動作します。- nowrap
heightと共に指定した場合、はみ出した列をインライン方向に表示します。- wrap
column-height と共に指定した場合、はみ出した列をブロック方向に表示します。
使用例
CSS
.sample {
column-count: 3;
width: 30em;
border: 1px solid #ccc;
}
HTML
<h3>height:auto; column-wrap:auto</h3> <div class="sample" style="height:auto; column-wrap:auto"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん </div> <h3>height:5rem; column-wrap:nowrap</h3> <div class="sample" style="height:5rem; column-wrap:nowrap"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん </div> <h3>height:5rem; column-wrap:wrap</h3> <div class="sample" style="height:5rem; column-wrap:wrap; margin-bottom:5lh;"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん </div> <h3>column-height:5rem; column-wrap:nowrap</h3> <div class="sample" style="column-height:5rem; column-wrap:nowrap;"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん </div> <h3>column-height:5rem; column-wrap:wrap</h3> <div class="sample" style="column-height:5rem; column-wrap:wrap"> あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん </div>
表示
height:auto; column-wrap:auto
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
height:5rem; column-wrap:nowrap
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
height:5rem; column-wrap:wrap
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
column-height:5rem; column-wrap:nowrap
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
column-height:5rem; column-wrap:wrap
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよわをん
関連項目
Copyright (C) 2026 杜甫々
初版:2026年2月22日、最終更新:2026年2月22日
https://www.tohoho-web.com/css/prop/column-wrap.htm