Thuộc tính word-break
CSS đặt xem các lần phá vỡ dòng có xuất hiện ở bất cứ nơi nào văn bản sẽ vượt qua hộp nội dung của nó hay không.word-break
CSS property sets whether line breaks appear wherever the text would otherwise overflow its content box.Thử nó
Cú pháp
/* Keyword values */
word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: break-word; /* deprecated */
/* Global values */
word-break: inherit;
word-break: initial;
word-break: revert;
word-break: revert-layer;
word-break: unset;
Thuộc tính word-break
được chỉ định là một từ khóa duy nhất được chọn từ danh sách các giá trị bên dưới.
Giá trị
normal
Sử dụng quy tắc ngắt dòng mặc định.
break-all
Để ngăn chặn tràn, các lần phá vỡ từ nên được chèn vào bất kỳ hai ký tự nào [không bao gồm văn bản Trung Quốc/Nhật Bản/Hàn Quốc].
keep-all
Không nên sử dụng phá vỡ từ cho văn bản Trung Quốc/Nhật Bản/Hàn Quốc [CJK]. Hành vi văn bản không CJK giống như đối với normal
.
word-break =0 không dùng nữaDeprecated
normal |
keep-all |
break-all |
break-word
Có tác dụng tương tự như
word-break =1 và
normal |
keep-all |
break-all |
break-word
word-break =2, bất kể giá trị thực của thuộc tính
normal |
keep-all |
break-all |
break-word
word-break =3.
normal |
keep-all |
break-all |
break-word
Lưu ý: Trái ngược với word-break =
4 và
normal |
keep-all |
break-all |
break-word word-break =
5 [xem
normal |
keep-all |
break-all |
break-word word-break =
3],
normal |
keep-all |
break-all |
break-word word-break =
7 sẽ tạo ra một sự phá vỡ tại nơi chính xác nơi văn bản sẽ tràn vào thùng chứa của nó [ngay cả khi đặt toàn bộ từ trên dòng của chính nó sẽ phủ nhận nhu cầu phá vỡ]. In contrast to
normal |
keep-all |
break-all |
break-word
word-break =4 and
normal |
keep-all |
break-all |
break-word
word-break =5 [see
normal |
keep-all |
break-all |
break-word
word-break =3],
normal |
keep-all |
break-all |
break-word
word-break =7 will create a break at the exact place where text would otherwise overflow its container [even if putting an entire word on its own line would negate the need for a break].
normal |
keep-all |
break-all |
break-word
LƯU Ý: Mặc dù word-break =
4 không được chấp nhận, nó có tác dụng tương tự, khi được chỉ định, là
normal |
keep-all |
break-all |
break-word word-break =
1 và
normal |
keep-all |
break-all |
break-word word-break =
2 - bất kể giá trị thực của thuộc tính
normal |
keep-all |
break-all |
break-word word-break =
3. While
normal |
keep-all |
break-all |
break-word
word-break =4 is deprecated, it has the same effect, when specified, as
normal |
keep-all |
break-all |
break-word
word-break =1 and
normal |
keep-all |
break-all |
break-word
word-break =2 — regardless of the actual value of the
normal |
keep-all |
break-all |
break-word
word-break =3 property.
normal |
keep-all |
break-all |
break-word
Định nghĩa chính thức
Cú pháp chính thức
word-break =
normal |
keep-all |
break-all |
break-word
Ví dụ
HTML
1. word-break: normal
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
2. word-break: break-all
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
3. word-break: keep-all
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
4. word-break: break-word
This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
CSS
.narrow {
padding: 10px;
border: 1px solid;
width: 500px;
margin: 0 auto;
font-size: 20px;
line-height: 1.5;
letter-spacing: 1px;
}
.normal {
word-break: normal;
}
.breakAll {
word-break: break-all;
}
.keepAll {
word-break: keep-all;
}
.breakWord {
word-break: break-word;
}
Thông số kỹ thuật
Mô-đun văn bản CSS Cấp 3 # Word-Break-Property # word-break-property |
Tính tương thích của trình duyệt web
Bảng BCD chỉ tải trong trình duyệt