Hướng dẫn how do you break a word in css? - làm thế nào để bạn ngắt một 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

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

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

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

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

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

Sự chỉ rõ

Thông số kỹ thuật không xác định # 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

Làm thế nào để bạn làm một từ

Sử dụng quy tắc ngắt dòng mặc định. Để 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]. 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ư bình thường.. To prevent overflow, word breaks should be inserted between any two characters [excluding Chinese/Japanese/Korean text]. Word breaks should not be used for Chinese/Japanese/Korean [CJK] text. Non-CJK text behavior is the same as for normal .

Làm thế nào để bạn phá vỡ nội dung trong CSS?

Một sự phá vỡ khó khăn [ -] sẽ luôn bị phá vỡ, ngay cả khi không cần thiết phải làm như vậy. Break Break [& Shy;] Chỉ phá vỡ nếu cần phá vỡ.Bạn cũng có thể sử dụng thuộc tính dấu gạch nối để sử dụng chuỗi bạn chọn thay vì ký tự dấu gạch nối ở cuối dòng [trước khi ngắt dòng gạch nối]. A soft break [ ] only breaks if breaking is needed. You can also use the hyphenate-character property to use the string of your choice instead of the hyphen character at the end of the line [before the hyphenation line break].

Làm cách nào để cắt văn bản trong CSS?

Text-Overflow: Ellipsis;không gian trắng: Nowrap;tràn: ẩn;Trong CSS [hoặc mã cứng theo kiểu, nhưng CSS sạch hơn].Nếu bạn muốn cắt hoàn toàn văn bản, hãy sử dụng clip thay vì dấu chấm lửng.use clip instead of ellipsis .

Làm cách nào để chia một từ trong một div bằng CSS?

Sử dụng từ văn bản: từ đột phá;Nó thậm chí còn hoạt động trong IE6, đó là một bất ngờ thú vị.Word-wrap: từ đột phá đã được thay thế bằng bao bọc bao gồm: từ đột phá;mà hoạt động trong mọi trình duyệt hiện đại.; It even works in IE6, which is a pleasant surprise. word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser.