Hướng dẫn how do you break a line after a particular word in css? - làm thế nào để bạn ngắt dòng sau một từ cụ thể trong css?

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

some random text and stuff sales/tele marketing some more words here

Giá trị

some random text and stuff sales/tele marketing some more words here

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

some random text and stuff sales/tele marketing some more words here

Để 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).

span {
    margin-right:-4px;
}

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

some random text and stuff sales/tele marketing some more words here

span {
    margin-right:-4px;
}

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

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

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

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

LƯU Ý: Mặc dù

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

span {
    margin-right:-4px;
}

Đị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;
}

Xem thêm