column-width

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since November 2016.

Thuộc tính column-width CSS đặt chiều rộng cột lý tưởng trong bố cục nhiều cột. Container sẽ có nhiều cột nhất có thể mà không có cột nào có chiều rộng nhỏ hơn giá trị column-width. Nếu chiều rộng của container nhỏ hơn giá trị được chỉ định, chiều rộng của cột duy nhất sẽ nhỏ hơn chiều rộng cột đã khai báo.

Thuộc tính này có thể giúp bạn tạo thiết kế responsive phù hợp với nhiều kích thước màn hình. Đặc biệt khi có thuộc tính column-count (có ưu tiên cao hơn), bạn phải chỉ định tất cả các giá trị độ dài liên quan để đạt được chiều rộng cột chính xác. Trong văn bản ngang, đây là width, column-width, column-gap, và column-rule-width.

Thuộc tính viết tắt columns có thể được sử dụng để đặt các giá trị thuộc tính column-width, column-count và column-height trong một khai báo duy nhất.

Try it

column-width: auto;

column-width: 6rem;

column-width: 120px;

column-width: 18ch;

<section id="default-example">
  <p id="example-element">
    London. Michaelmas term lately over, and the Lord Chancellor sitting in
    Lincoln's Inn Hall. Implacable November weather. As much mud in the streets
    as if the waters had but newly retired from the face of the earth, and it
    would not be wonderful to meet a Megalosaurus, forty feet long or so,
    waddling like an elephantine lizard up Holborn Hill.
  </p>
</section>

#example-element {
  width: 100%;
  columns: auto;
  text-align: left;
}

Cú pháp

css

/* Giá trị từ khóa */
column-width: auto;

/* Giá trị <length> */
column-width: 60px;
column-width: 15.5em;
column-width: 3.3vw;

/* Giá trị toàn cục */
column-width: inherit;
column-width: initial;
column-width: revert;
column-width: revert-layer;
column-width: unset;

Thuộc tính column-width được chỉ định là một trong các giá trị liệt kê bên dưới.

Giá trị

<length>: Chỉ ra chiều rộng cột tối ưu. Chiều rộng cột thực tế có thể khác với giá trị được chỉ định: nó có thể rộng hơn khi cần thiết để lấp đầy không gian có sẵn, và hẹp hơn khi không gian có sẵn quá nhỏ. Giá trị phải hoàn toàn dương hoặc khai báo không hợp lệ. Giá trị phần trăm cũng không hợp lệ.
auto: Chiều rộng của cột được xác định bởi các thuộc tính CSS khác, chẳng hạn như column-count.

Định nghĩa chính thức

Initial value	`auto`
Applies to	Block containers except table wrapper boxes
Inherited	no
Computed value	`auto` if specified as `auto`, otherwise for `<length>` the absolute value specified
Animation type	by computed value type

Cú pháp chính thức

column-width = 
  auto                                |
  <length [0,∞]>                      |
  min-content                         |
  max-content                         |
  fit-content( <length-percentage> )  

<length-percentage> = 
  <length>      |
  <percentage>

Ví dụ

Đặt chiều rộng cột theo pixel

HTML

html

<p class="content-box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
  nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi
  enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis
  nisl ut aliquip ex ea commodo consequat.
</p>