Thuộc tính column-rule

Thuộc tính column-rule thiết lập đường viền giữa các cột trong văn bản nhiều cột. Về các giá trị được chấp nhận, nó trùng khớp với thuộc tính border.

Ví dụ . Kiểu solid

Trong ví dụ này, văn bản sẽ được chia thành 3 cột với đường viền giữa các cột dưới dạng đường liền nét dày 1px (khoảng cách giữa các cột sẽ được tạo tự động, vì column-gap được đặt ở giá trị 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;
}

Результат:

Ví dụ . Ảnh hưởng của column-gap

Trong ví dụ này, văn bản sẽ được chia thành 3 cột với khoảng cách giữa chúng là 50px. Đường viền khi đó sẽ đi qua giữa khoảng cách (bên phải và bên trái đường viền sẽ có 25px mỗi bên):

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

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

Результат:

Xem thêm