Hướng dẫn how do i make a line break in css? - làm cách nào để ngắt dòng trong css?

Thử nó

Cú pháp

/* Keyword values */
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: anywhere;

/* Global values */
line-break: inherit;
line-break: initial;
line-break: revert;
line-break: revert-layer;
line-break: unset;

Giá trị

h4 {
  display: inline;
}

Phá vỡ văn bản bằng cách sử dụng quy tắc ngắt dòng mặc định.

h4 {
  display: inline;
}

Phá vỡ văn bản bằng cách sử dụng quy tắc phá vỡ dòng hạn chế ít nhất. Thường được sử dụng cho các dòng ngắn, chẳng hạn như trong các tờ báo.

h4 {
  display: inline;
}

Phá vỡ văn bản bằng cách sử dụng quy tắc phá vỡ dòng phổ biến nhất.

h4 {
  display: inline;
}

Phá vỡ văn bản bằng cách sử dụng quy tắc phá vỡ dòng nghiêm ngặt nhất.

h4 {
  display: inline;
}

Có một cơ hội bọc mềm xung quanh mọi đơn vị nhân vật đánh máy, bao gồm xung quanh bất kỳ ký tự chấm câu hoặc không gian trắng được bảo tồn, hoặc ở giữa các từ, coi thường bất kỳ lệnh cấm nào đối với các giao dịch bị phá vỡ, ngay cả những nhân vật được giới thiệu bởi các nhân vật với nhân vật GL, WJ hoặc ZWJ lớp hoặc được ủy quyền bởi tài sản

h4 {
  display: inline;
}

Định nghĩa chính thức

Cú pháp chính thức

line-break = 
  auto      |
  loose     |
  normal    |
  strict    |
  anywhere  

Ví dụ

Đặt văn bản gói

Xem liệu văn bản có được bọc trước "" "," "và" ".

HTML

<div lang="ja">
  <p class="wrapbox auto">
    auto:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox loose">
    loose:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox normal">
    normal:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox strict">
    strict:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
  <p class="wrapbox anywhere">
    anywhere:<br />そこは湖のほとりで木々が輝いていた。<br />その景色に、美しいなぁと思わずつぶやいた。
  </p>
</div>

CSS

.wrapbox {
  width: 10em;
  margin: 0.5em;
  white-space: normal;
  vertical-align: top;
  display: inline-block;
}
.auto {
  line-break: auto;
}
.loose {
  line-break: loose;
}
.normal {
  line-break: normal;
}
.strict {
  line-break: strict;
}
.anywhere {
  line-break: anywhere;
}

Kết quả