Hướng dẫn what is the do not break word in css? - không ngắt từ trong css là gì?

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

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

Từ nào

Thuộc tính CSS phá vỡ Word có đặt ra các lần phá vỡ dòng 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.sets whether line breaks appear wherever the text would otherwise overflow its content box.

Làm thế nào để bạn dừng từ

Word tự động phá vỡ văn bản tại một không gian hoặc dấu gạch nối ở cuối dòng.Để giữ hai từ hoặc một từ được gạch nối với nhau trên một dòng, bạn có thể sử dụng một không gian không phá vỡ hoặc dấu gạch nối không phá vỡ thay vì không gian thông thường hoặc dấu gạch nối.use a nonbreaking space or nonbreaking hyphen instead of a regular space or hyphen.

Làm cách nào để giữ văn bản trong một dòng trong CSS?

Nếu bạn muốn giới hạn độ dài văn bản ở một dòng, bạn có thể cắt dòng, hiển thị dấu chấm lửng hoặc chuỗi tùy chỉnh.Tất cả những điều này có thể được thực hiện với thuộc tính dòng văn bản CSS, xác định cách thức nội dung tràn phải được báo hiệu cho người dùng.clip the line, display an ellipsis or a custom string. All these can be done with the CSS text-overflow property, which determines how the overflowed content must be signalled to the user.

Làm thế nào để bạn dừng phá vỡ dòng trong CSS?

Thuộc tính không gian trắng có nhiều tùy chọn, tất cả đều xác định cách xử lý không gian trắng bên trong một phần tử nhất định.Ở đây, bạn đã đặt không gian trắng thành NowRap, điều này sẽ ngăn chặn tất cả các lần ngắt dòng.set white-space to nowrap , which will prevent all line breaks.