Hướng dẫn css word-break

Question

Trang chủ
Tham khảo
CSS
CSS3
Thuộc tính word-break

Nội dung chính Show

Định nghĩa và sử dụng
Cấu trúc
1) Thuộc tính word-break trong CSS
2) Cách sử dụng thuộc tính word-break trong CSS
Cú pháp chính thức

Định nghĩa và sử dụng

Thuộc tính word-break sẽ làm cho những chữ trong một từ không còn là một thể thống nhất, nghĩa là có thể xuống hàng bất cứ vị trí nào trong từ.

Cấu trúc

tag {
    word-break: giá trị;
}

word-break có các giá trị như sau:

Thuộc tính	giá trị	Ví dụ	Mô tả
word-break	break-all	word-break: break-all;	khi hết đoạn thì một từ sẽ tự động ngắt ở bất kỳ chữ nào để xuống hàng.
hyphenate	word-break: hyphenate;	Một từ sẽ được xuống hàng tại một vị trí gạch nối thích hợp.
normal	word-break: normal;	Trả về dạng mặc định ban đầu cho một từ.

HTML viết:

Học web chuẩn sẽ giúp bạn định hình lại những gì đã học.

CSS viết:

p {
    border: 1px solid #cc0000;
    width: 100px;
}

Hiển thị trình duyệt khi chưa có word-break:

Học web chuẩn sẽ giúp bạn định hình lại những gì đã học.

Thêm thuộc tính word-break vào CSS:

p {
    border: 1px solid #cc0000;
    width: 100px;
    word-break: break-all;
}

Hiển thị trình duyệt khi có word-break:

Học web chuẩn sẽ giúp bạn định hình lại những gì đã học

1) Thuộc tính word-break trong CSS

- Thuộc tính word-break xác định cách thức phá vỡ một từ.

(hay nói cách khác là cách thức ngắt ký tự của một từ xuống dòng)

- Mặc định, nếu phần còn lại của hàng hiện tại không đủ chỗ để chứa hết từ thì từ đó sẽ được bắt đầu trên một hàng mới & nếu một từ quá dài vượt quá chiều rộng phần nội dung của phần tử thì từ đó sẽ bị tràn ra ngoài:

Loạt tài liệu hướng dẫn học lập trình web của chúng tôi bao gồm HTMLCSSJavaScriptMySQLPHPjQuery được biên soạn kỹ lưỡng theo mức độ từ cơ bản đến nâng cao.

- Tuy nhiên, với việc sử dụng thuộc tính word-break, ta có thể thiết lập việc một từ sẽ được bắt đầu ở hàng hiện tại mặc cho nó có đủ chỗ chứa hết từ đó hay không & ngắt các ký tự của từ xuống dòng nếu từ đó bị tràn ra khỏi phần tử.

Loạt tài liệu hướng dẫn học lập trình web của chúng tôi bao gồm HTMLCSSJavaScriptMySQLPHPjQuery được biên soạn kỹ lưỡng theo mức độ từ cơ bản đến nâng cao.

2) Cách sử dụng thuộc tính word-break trong CSS

- Để sử dụng thuộc tính word-break, ta dùng cú pháp như sau:

word-break: normal|break-word|break-all|initial|inherit;

- Trong đó, ta thấy giá trị của thuộc tính word-break có thể được xác định bởi một trong năm loại:

normal	- Một từ sẽ bắt đầu trên hàng mới nếu phần còn lại của hàng hiện tại không đủ chứa hết nó - Nếu một từ quá dài vượt quá chiều rộng phần nội dung của phần tử thì từ đó sẽ bị tràn ra ngoài	Xem ví dụ
break-word	- Một từ sẽ bắt đầu trên hàng mới nếu phần còn lại của hàng hiện tại không đủ chứa hết nó - Nếu một từ quá dài vượt quá chiều rộng phần nội dung của phần tử thì phần ký tự tràn ra ngoài sẽ được ngắt xuống dòng.	Xem ví dụ
break-all	- Một từ sẽ bắt đầu tiếp tục trên hàng hiện tại nếu hàng đó còn dư khoảng trống mặc cho có đủ để chứa hết từ đó hay không. - Nếu một từ quá dài vượt quá chiều rộng phần nội dung của phần tử thì phần ký tự tràn ra ngoài sẽ được ngắt xuống dòng.	Xem ví dụ
initial	- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính word-break có giá trị là normal)	Xem ví dụ
inherit	- Kế thừa giá trị thuộc tính word-break từ phần tử cha của nó.	Xem ví dụ

Thuộc tính CSS word-break dùng để thiết lập ngắt dòng trong văn bản tràn quá khối chứa nội dung của nó.

Cú pháp

/* Keyword values */
word-break: normal; 
word-break: break-all; 
word-break: keep-all;
word-break: break-word; /* non-standard */ 

/* Global values */
word-break: inherit;
word-break: initial;
word-break: unset;

Thuộc tính word-break được quy định như một từ khóa duy nhất được lựa chọn từ danh sách các giá trị dưới đây.

Giá trị

normal

Sử dụng quy tắc ngắt dòng mặc định.

break-all

Để ngăn tràn, nên ngắt từ giữa hai ký tự bất kỳ (không bao gồm văn bản tiếng Trung/tiếng Nhật/tiếng Hàn).

keep-all

Từ ngắt không nên được sử dụng 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 phải của CJK cũng giống như đối với normal.

break-word

Để ngăn chặn tràn, thông thường các từ không thể ngắt có thể được ngắt tại các điểm tùy ý nếu không có điểm ngắt nào được chấp nhận trong dòng.

Lưu ý: Ngược với word-break: break-word và overflow-wrap: break-word (xem overflow-wrap), word-break: break-all sẽ tạo ra một dấu ngắt tại vị trí chính xác nơi văn bản sẽ tràn vào vùng chứa của nó (ngay cả khi đặt toàn bộ một từ trên dòng của chính nó sẽ phủ nhận sự cần thiết phải ngắt).

Cú pháp chính thức

normal | break-all | keep-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: 5px;
  border: 1px solid;
  display: table;
  max-width: 100%;
}

.normal {
  word-break: normal;
}

.breakAll {
  word-break: break-all;
}

.keepAll {
  word-break: keep-all;
}

.breakWord { 
  word-break: break-word; 
}

programming css word-break trong css word-wrap: break-word; overflow-wrap white-space trong css flex-wrap trong css

Hướng dẫn css word-break

Định nghĩa và sử dụng

Cấu trúc

HTML viết:

CSS viết:

Hiển thị trình duyệt khi chưa có word-break:

Thêm thuộc tính word-break vào CSS:

Hiển thị trình duyệt khi có word-break:

1) Thuộc tính word-break trong CSS

2) Cách sử dụng thuộc tính word-break trong CSS

Cú pháp

Giá trị

Cú pháp chính thức

Ví dụ

HTML

CSS

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội