column-countプロパティ

column-countプロパティは、段組みテキストの推奨される カラム数を指定します。 実際のカラム数は、カラムの幅や カラム間の間隔のサイズによって、 指定された数と異なる場合があります。

構文

cssセレクタ {
  column-count: 数値 | auto;
}

値

初期値: auto。

例

この例では、テキストは3つの カラムに分割されます（もちろん、段組みを サポートするブラウザでの話です。 それ以外のブラウザでは通常の1カラムの テキストとして表示されます）：

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: 3;
  text-align: justify;
}

Результат:

例 . auto 値

この例では、カラムの幅column-widthが 150px、カラム数column-countは autoに設定されています。ブラウザが 必要なカラム数とカラム間の間隔を 自動的に決定します：

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

関連項目