Hướng dẫn how do you split words in css? - làm thế nào để bạn tách các từ trong css?

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 = 
normal |
keep-all |
break-all |
break-word
0 không dùng nữaDeprecated

Có tác dụng tương tự như

word-break = 
normal |
keep-all |
break-all |
break-word
1 và
word-break = 
normal |
keep-all |
break-all |
break-word
2, bất kể giá trị thực của thuộc tính
word-break = 
normal |
keep-all |
break-all |
break-word
3.

Lưu ý: Trái ngược với

word-break = 
normal |
keep-all |
break-all |
break-word
4 và
word-break = 
normal |
keep-all |
break-all |
break-word
5 (xem
word-break = 
normal |
keep-all |
break-all |
break-word
3),
word-break = 
normal |
keep-all |
break-all |
break-word
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
word-break = 
normal |
keep-all |
break-all |
break-word
4 and
word-break = 
normal |
keep-all |
break-all |
break-word
5 (see
word-break = 
normal |
keep-all |
break-all |
break-word
3),
word-break = 
normal |
keep-all |
break-all |
break-word
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).

LƯU Ý: Mặc dù

word-break = 
normal |
keep-all |
break-all |
break-word
4 không được chấp nhận, nó có tác dụng tương tự, khi được chỉ định, là
word-break = 
normal |
keep-all |
break-all |
break-word
1 và
word-break = 
normal |
keep-all |
break-all |
break-word
2 - bất kể giá trị thực của thuộc tính
word-break = 
normal |
keep-all |
break-all |
break-word
3.
While
word-break = 
normal |
keep-all |
break-all |
break-word
4 is deprecated, it has the same effect, when specified, as
word-break = 
normal |
keep-all |
break-all |
break-word
1 and
word-break = 
normal |
keep-all |
break-all |
break-word
2 — regardless of the actual value of the
word-break = 
normal |
keep-all |
break-all |
break-word
3 property.

Định nghĩa chính thức

Giá trị ban đầunormal
Áp dụng choTất cả các yếu tố
Thừa hưởngVâng
Giá trị tính toántheo quy định
Loại hoạt hìnhrời rạc

Cú pháp chính thức

word-break = 
normal |
keep-all |
break-all |
break-word

Ví dụ

HTML

<p>1. <code>word-break: normalcode>p>
<p class="normal narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
p>

<p>2. <code>word-break: break-allcode>p>
<p class="breakAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
p>

<p>3. <code>word-break: keep-allcode>p>
<p class="keepAll narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
p>

<p>4. <code>word-break: break-wordcode>p>
<p class="breakWord narrow">
  This is a long and Honorificabilitudinitatibus califragilisticexpialidocious
  Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
  グレートブリテンおよび北アイルランド連合王国という言葉は本当に長い言葉
p>

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

Sự chỉ rõ
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

Xem thêm