Thuộc tính `columns-width` trong CSS dùng để định nghĩa độ rộng của các cột. Số cột tối thiểu cần thiết để hiển thị nội dung trên phần tử. Đây là thuộc tính linh hoạt. Nếu trình duyệt không thể vừa ít nhất hai cột với độ rộng cột nhất định, chúng sẽ được gộp thành một cột.
Syntax:
column-width: auto|length|initial|inherit;
Property Values:
- auto: Đây là giá trị mặc định. Trình duyệt sẽ tự xác định độ rộng của các cột.
- length: Dùng để chỉ định độ rộng của các cột theo đơn vị đo lường. Bạn có thể thiết lập độ dài ở dạng px, cm,...
- initial: Sử dụng để đặt thuộc tính `column-width` về giá trị mặc định.
- inherit: Dùng để kế thừa giá trị thuộc tính `column-width` từ phần tử cha.
Example: Trong ví dụ này, chúng ta sử dụng thuộc tính `column-width: auto`.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS column-width Property
</title>
<style>
.gfg {
/* For Chrome, Safari, Opera browsers */
-webkit-column-width: auto;
/* For Firefox browser */
-moz-column-width: auto;
column-width: auto;
}
</style>
</head>
<body>
<h2>
The column-width Property
</h2>
<div class="gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
Output:
Example: Trong ví dụ này, chúng ta sử dụng thuộc tính `column-width: length`.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS column-width Property
</title>
<style>
.gfg {
/* For Chrome, Safari, Opera browsers */
-webkit-column-width: 100px;
/* For Firefox browser */
-moz-column-width: 100px;
column-width: 100px;
}
</style>
</head>
<body>
<h2>
The column-width Property
</h2>
<div class="gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
Output:
Example: Trong ví dụ này, chúng ta sử dụng thuộc tính `column-width: initial`.
html<!DOCTYPE html>
<html>
<head>
<title>
CSS column-width Property
</title>
<style>
.gfg {
/* For Chrome, Safari, Opera browsers */
-webkit-column-width: initial;
/* For Firefox browser */
-moz-column-width: initial;
column-width: initial;
}
</style>
</head>
<body>
<h2>
The column-width Property
</h2>
<div class="gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
Output:
Supported Browsers: Các trình duyệt được hỗ trợ bởi thuộc tính column-width được liệt kê dưới đây:
- Google Chrome 50.0 trở lên
- Edge 12.0 trở lên
- Internet Explorer 10.0 trở lên
- Firefox 50.0 trở lên
- Opera 11.1 trở lên
- Safari 9.0 trở lên