text-wrap-mode
Baseline
2024
Newly available
Since October 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Thuộc tính text-wrap-mode CSS kiểm soát liệu văn bản bên trong một phần tử có được xuống dòng hay không. Các giá trị khác nhau cung cấp các cách thay thế để xuống dòng nội dung của một phần tử khối. Nó cũng có thể được đặt và đặt lại bằng viết tắt text-wrap hoặc viết tắt white-space.
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.
Note: Tên của thuộc tính này là tạm thời, chờ CSSWG tìm được tên tốt hơn.
Try it
text-wrap-mode: wrap;
text-wrap-mode: nowrap;
<section class="default-example" id="default-example">
<div class="whole-content-wrapper">
<p>Edit the text in the box:</p>
<div class="transition-all" id="example-element">
<p contenteditable>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut
cum eum id quos est.
</p>
</div>
</div>
</section>
.whole-content-wrapper {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
#example-element {
border: 1px solid #c5c5c5;
width: 250px;
}
Cú pháp
/* Giá trị từ khóa */
text-wrap-mode: wrap;
text-wrap-mode: nowrap;
/* Giá trị toàn cục */
text-wrap-mode: inherit;
text-wrap-mode: initial;
text-wrap-mode: revert;
text-wrap-mode: revert-layer;
text-wrap-mode: unset;
Giá trị
Thuộc tính này xác định liệu các dòng có thể xuống dòng tại các cơ hội xuống dòng mềm không bắt buộc hay không. Các giá trị có thể:
Định nghĩa hình thức
| Initial value | wrap |
|---|---|
| Applies to | text and block containers |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
text-wrap-mode =
wrap |
nowrap
Ví dụ
Xuống dòng nội dung
Cài đặt mặc định là xuống dòng nội dung nên thuộc tính text-wrap-mode không cần thiết. Trong ví dụ này, nội dung sẽ chảy sang dòng tiếp theo để vừa với hộp, dòng cuối cùng dài hơn hộp chứa nên bị tràn.
HTML
<div class="box">CSS IS AWESOME</div>
CSS
.box {
font-family: "Arial", sans-serif;
font-weight: bold;
font-size: 64px;
box-sizing: border-box;
border: 4px solid black;
padding: 0px 3px;
width: 223px;
text-wrap-mode: wrap;
}
Kết quả
Không xuống dòng nội dung
Trong ví dụ này, nội dung sẽ không chảy sang dòng tiếp theo để vừa với hộp vì nội dung đã được yêu cầu không xuống dòng với text-wrap-mode: nowrap;, nội dung dài hơn hộp chứa nên bị tràn.
HTML
<div class="box">CSS IS AWESOME</div>
CSS
.box {
font-family: "Arial", sans-serif;
font-weight: bold;
font-size: 64px;
box-sizing: border-box;
border: 4px solid black;
padding: 0px 3px;
width: 223px;
text-wrap-mode: nowrap;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Text Module Level 4 # text-wrap-mode |