【CSS3リファレンス】column-width

こんにちは（・∀・）

CSS3で新しく追加されたプロパティをご紹介します。今回ご紹介するCSSプロパティはcolumn-widthです。

概要

column-widthプロパティを使用してその段組の幅を指定する事ができます。

.sample {
  column-width: 10em;
}

適用要素

ブロックレベル要素（置換要素、table要素は除く）th要素、td要素、inline-blockの要素

指定できる値

数値+単位

段の幅を数値+単位で指定
実際に表示される幅は状況に応じて変化します。

auto

auto以外の値を持つcolumn-countなど他のプロパティによって決まる

初期値

auto

サンプル

HTML

<p class="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultricies, nisi eu semper congue, dui ante varius nunc, in tempus ex lorem sed urna. Sed placerat pretium nibh, ac vulputate risus posuere eget. Donec felis lacus, elementum non augue ac, tincidunt placerat erat. Aenean posuere arcu nec est sodales convallis. Aliquam in purus vel metus tincidunt euismod sed eu quam. Etiam quis elit vel sapien varius tincidunt. Morbi accumsan posuere purus ultricies euismod. Nulla dictum eget enim luctus dictum. Praesent porta tellus erat, vitae tincidunt orci ornare a. Donec semper blandit turpis sed gravida. Pellentesque dapibus luctus dolor, sit amet tempor mauris condimentum quis. Suspendisse ac condimentum ipsum. Vivamus vitae magna tortor. Mauris nec lobortis dui.
</p>

CSS

.demo {
  -webkit-column-width: 10em;
  column-width: 10em;
}

サンプルのCSSはVendor-Prefixを使用した例も載せてあります。

Result