white-space-collapse
Baseline
2024
*
Newly available
Since March 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Thuộc tính white-space-collapse của CSS kiểm soát cách khoảng trắng bên trong một phần tử được thu gọn.
Note:
Các thuộc tính white-space-collapse và text-wrap-mode có thể được khai báo cùng nhau bằng thuộc tính viết tắt white-space.
Cú pháp
/* Giá trị từ khóa */
white-space-collapse: collapse;
white-space-collapse: preserve;
white-space-collapse: preserve-breaks;
white-space-collapse: preserve-spaces;
white-space-collapse: break-spaces;
/* Giá trị toàn cục */
white-space-collapse: inherit;
white-space-collapse: initial;
white-space-collapse: revert;
white-space-collapse: revert-layer;
white-space-collapse: unset;
Thuộc tính white-space-collapse được chỉ định là một từ khóa đơn được chọn từ danh sách các giá trị dưới đây.
Giá trị
collapse-
Các chuỗi khoảng trắng được thu gọn.
preserve-
Các chuỗi khoảng trắng và ký tự ngắt đoạn được bảo toàn.
preserve-breaks-
Các chuỗi khoảng trắng được thu gọn, trong khi ký tự ngắt đoạn được bảo toàn.
preserve-spaces-
Các chuỗi khoảng trắng được bảo toàn, trong khi tab và ký tự ngắt đoạn được chuyển thành dấu cách.
break-spaces-
Hành vi giống hệt
preserve, ngoại trừ:- Bất kỳ chuỗi khoảng trắng được bảo toàn nào luôn chiếm không gian, kể cả ở cuối dòng.
- Cơ hội ngắt dòng tồn tại sau mỗi ký tự khoảng trắng được bảo toàn, kể cả giữa các ký tự khoảng trắng.
- Khoảng trắng được bảo toàn chiếm không gian và không treo, do đó ảnh hưởng đến kích thước nội tại của hộp (kích thước
min-contentvàmax-content).
Note: Ký tự ngắt đoạn là các ký tự như ký tự xuống dòng khiến văn bản ngắt sang dòng mới.
Note:
Mô-đun văn bản CSS định nghĩa giá trị discard cho thuộc tính white-space-collapse để loại bỏ tất cả khoảng trắng trong phần tử, tuy nhiên giá trị này chưa được hỗ trợ trong bất kỳ trình duyệt nào.
Định nghĩa chính thức
| Initial value | collapse |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp chính thức
white-space-collapse =
collapse |
discard |
preserve |
preserve-breaks |
preserve-spaces |
break-spaces
Ví dụ
HTML
<h2 class="collapse">Default behavior;
all whitespace is collapsed
in the heading .</h2>
<h2 class="preserve">In this case
all whitespace is preserved
in the heading .</h2>
<h2 class="preserve-breaks">In this case only
the line breaks are preserved
in the heading .</h2>
<h2 class="preserve-spaces">In this case only
the spaces are preserved
in the heading .</h2>
CSS
.collapse {
white-space-collapse: collapse;
}
.preserve {
white-space-collapse: preserve;
}
.preserve-breaks {
white-space-collapse: preserve-breaks;
}
.preserve-spaces {
white-space-collapse: preserve-spaces;
}
h2 {
font-size: 1.6rem;
font-family: monospace;
border-bottom: 1px dotted #cccccc;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Text Module Level 4 # white-space-collapsing |
Khả năng tương thích trình duyệt
Xem thêm
- Viết tắt cho
white-space-collapsevàtext-wrap-mode: Thuộc tínhwhite-space. - Mô-đun văn bản CSS
- Xử lý khoảng trắng trong CSS