line-break
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.
Thuộc tính line-break trong CSS thiết lập cách ngắt dòng văn bản tiếng Trung, Nhật hoặc Hàn (CJK) khi làm việc với dấu câu và ký hiệu.
Try it
line-break: auto;
line-break: anywhere;
line-break: normal;
line-break: loose;
<section id="default-example">
<p id="example-element">
この喫茶店は、いつでもコーヒーの香りを漂わせています。<br />彼女はこの喫茶店で働いて、着々と実力をつけていきました。<br />今では知る人ぞ知る、名人です。
</p>
</section>
#example-element {
font-family: "Yu Gothic", "YuGothic", "Meiryo", "ＭＳ ゴシック", sans-serif;
border: 2px dashed #999999;
text-align: left;
width: 240px;
font-size: 16px;
}
Cú pháp
/* Giá trị từ khóa */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;
/* Giá trị toàn cục */
line-break: inherit;
line-break: initial;
line-break: revert;
line-break: revert-layer;
line-break: unset;
Giá trị
auto-
Ngắt văn bản theo quy tắc ngắt dòng mặc định.
loose-
Ngắt văn bản theo quy tắc ngắt dòng ít hạn chế nhất. Thường được dùng cho các dòng ngắn, chẳng hạn trong báo.
normal-
Ngắt văn bản theo quy tắc ngắt dòng phổ biến nhất.
strict-
Ngắt văn bản theo quy tắc ngắt dòng nghiêm ngặt nhất.
anywhere-
Có cơ hội xuống dòng mềm xung quanh mọi đơn vị ký tự chữ, bao gồm xung quanh bất kỳ ký tự dấu câu hay khoảng trắng được giữ lại, hoặc ở giữa các từ, bất kể lệnh cấm ngắt dòng nào, kể cả những lệnh được giới thiệu bởi các ký tự thuộc lớp GL, WJ hoặc ZWJ hoặc được yêu cầu bởi thuộc tính
word-break. Các cơ hội xuống dòng khác nhau không được ưu tiên. Dấu gạch nối không được áp dụng.
Định nghĩa hình thức
| Initial value | auto |
|---|---|
| Applies to | all elements |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp hình thức
line-break =
auto |
loose |
normal |
strict |
anywhere
Ví dụ
Thiết lập xuống dòng văn bản
Xem liệu văn bản có xuống dòng trước "々", "ぁ" và "。" hay không.
HTML
<div lang="ja">
<p class="wrap-box auto">
auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrap-box loose">
loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrap-box normal">
normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrap-box strict">
strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
<p class="wrap-box anywhere">
anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
</p>
</div>
CSS
.wrap-box {
width: 10em;
margin: 0.5em;
white-space: normal;
vertical-align: top;
display: inline-block;
}
.auto {
line-break: auto;
}
.loose {
line-break: loose;
}
.normal {
line-break: normal;
}
.strict {
line-break: strict;
}
.anywhere {
line-break: anywhere;
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Text Module Level 3 # line-break-property |
Khả năng tương thích trình duyệt
Xem thêm
- CSS and international text trên W3C