プロパティ column-rule

プロパティ column-rule は、 マルチカラムテキストのカラム間の境界線を 指定します。 受け取る値に関しては、プロパティ border と同じです。

例 . solidタイプ

この例では、テキストは 3 カラムに分割され、カラム間の境界線は 1px の太さの実線になります （カラム間の間隔は、column-gap が normal に設定されているため、 自動的に形成されます）：

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

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: normal;
  text-align: justify;
}

Результат:

例 . column-gapの影響

この例では、テキストは 3 カラムに分割され、その間の間隔は 50px です。 境界線はこの間隔の中央を通ります （境界線の左右にはそれぞれ 25px のスペースがあります）：

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

css#elem {
  column-rule: 1px solid black;
  column-count: 3;
  column-gap: 50px;
  text-align: justify;
}

Результат:

関連項目