CSS3: CSS: word-break

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực

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

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

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

<p>4. <code>word-break: break-word</code></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; 
}

» Tiếp: CSS: word-spacing
« Trước: text-transform
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!