Ngắt dòng giữa các dòng. Ngắt dòng có thể được thêm vào giữa dòng văn bản. khoảng trắng. vạch sẵn;

ví dụ 1

<____9

  Break right after this

  

  
    and before this
  

0

  Break right after this

  

  
    and before this
  

1

<____13____10

  Break right after this

  

  
    and before this
  

5<<0

  Break right after this

  

  
    and before this
  

0

<2<3

<2<5

  Break right after this

  

  
    and before this
  

5<7<0

  Break right after this

  

  
    and before this
  

0

html0

  Break right after this

  

  
    and before this
  

5____92

<2html4

  Break right after this

  

  
    and before this
  

5<html7

  Break right after this

  

  
    and before this
  

0

<2

  Break right after this

  

  
    and before this
  

00

  Break right after this

  

  
    and before this
  

01

  Break right after this

  

  
    and before this
  

02

  Break right after this

  

  
    and before this
  

01

  Break right after this

  

  
    and before this
  

04

<2

  Break right after this

  

  
    and before this
  

06

_______15____87____97____10

_______87____13____10

  Break right after this

  

  
    and before this
  

1

___8____116____10

  Break right after this

  

  
    and before this
  

5<<0<1<0

  Break right after this

  

  
    and before this
  

0

html0

  Break right after this

  

  
    and before this
  

5<<7

  Break right after this

  

  
    and before this
  

0

<2

  Break right after this

  

  
    and before this
  

30

<2

  Break right after this

  

  
    and before this
  

32

  Break right after this

  

  
    and before this
  

5<7<7

  Break right after this

  

  
    and before this
  

0

html0

  Break right after this

  

  
    and before this
  

5<

  Break right after this

  

  
    and before this
  

00

  Break right after this

  

  
    and before this
  

0

<2

  Break right after this

  

  
    and before this
  

03

<2

  Break right after this

  

  
    and before this
  

05

<2

  Break right after this

  

  
    and before this
  

07

<2

  Break right after this

  

  
    and before this
  

09

  Break right after this

  

  
    and before this
  

5<7

  Break right after this

  

  
    and before this
  

00

  Break right after this

  

  
    and before this
  

0

_______87____116____10

  Break right after this

  

  
    and before this
  

1

<7____9<0

đầu ra

Ngắt dòng giữa các phần tử HTML. Có thể thêm ngắt dòng giữa các phần tử HTML bằng cách sử dụng các thuộc tính CSS. Có hai phương pháp để buộc các phần tử nội tuyến thêm dòng mới

In this article, we will learn how to break a line of any statement using properties of CSS. You must know
tag that is used in HTML to break the line. But in this article, we will use only CSS to perform this task.

Chúng tôi sử dụng thuộc tính từ – break trong < . Thuộc tính CSS that is used to specify how a word should be broken or split when reaching the end of a line. The từ – quấn là used to split/break long words and wrap them into the next line. The tràn – CSS bọc được áp dụng cho các phần tử nội tuyến & chỉ định rằng .

.word {
    width: 200px;
    overflow-wrap: break-word;  
    word-wrap: break-word; 
    word-break: break-word;
}

Trong CSS này, chúng ta cần chỉ định chiều rộng từ nơi bắt đầu ngắt dòng. Trong đoạn mã trên, ngắt dòng sẽ bắt đầu sau khi đạt được chiều rộng 200px

Tôi gặp một tình huống nhỏ khi tôi có một tiêu đề có một khoảng trong đó và tôi muốn đảm bảo đặt một dấu ngắt dòng trước khoảng đó. Đối với bản ghi, thực sự không có gì sai khi chỉ cần chọn một thẻ html8 trước nó (và trên thực tế, khả năng hiển thị/ẩn thẻ đó rất hữu ích). Nhưng… luôn cảm thấy hơi lạ khi phải sử dụng HTML để đạt được bố cục

Vì vậy, chúng ta hãy có một cuộc hành trình. Một hành trình mà chúng ta nói “Nhưng…” rất nhiều

  Break right after this

  

  
    and before this
  

Một yếu tố cấp khối sẽ làm điều đó

Thay vì một html9, chúng ta có thể sử dụng một

  Break right after this

  

  
    and before this
  

00, và chúng ta sẽ đạt được điều đó nhờ div là một phần tử cấp khối

Nhưng chúng tôi đang sử dụng một nhịp có mục đích, vì thiết kế. Văn bản sau dấu ngắt phải ở dạng nội tuyến/khối nội tuyến, bởi vì nó sẽ có nền và phần đệm, v.v.

Bạn có thể chèn ngắt dòng thông qua phần tử giả

Dễ thôi

h1 span::before {
  content: "\A";
}

Nhưng… html9 là một phần tử nội tuyến. Ngắt dòng sẽ không làm gì cả. Giống như ngắt dòng thực sự sẽ không làm được gì

Chúng ta có thể buộc ngắt dòng đó hoạt động bằng cách làm cho khoảng trắng có ý nghĩa…

h1.two span::before {
  content: "\A";
  white-space: pre;
}

Điều đó thực sự hoạt động. Nhưng… vì phần đệm và nền, nó để lại một đoạn nhỏ phía sau khi ngắt dòng

Chúng tôi có thể khắc phục tình trạng ôm sát mép trái một cách khó xử bằng cách sử dụng

  Break right after this

  

  
    and before this
  

02, nhưng… điều đó chỉ để lại một phần lớn hơn ở trên cùng

box-decoration-break rất tốt cho một số vấn đề, nhưng không phải vấn đề này

Nếu chúng tôi tạo khối nội tuyến nhịp, sự cố sẽ xảy ra trong khối đó, đó cũng không phải là điều chúng tôi muốn

Đặt mức khối phần tử giả và để riêng khoảng thời gian cũng không thực hiện được mẹo

Bạn có thể hơi kỳ lạ một chút và đưa vào văn bản thực tế một yếu tố giả

Đây là ý tưởng của Aaron Bushnell. Mẹo ở đây là tạo mức khối nhịp, nhưng sau đó thêm phần tử giả vào văn bản và tạo kiểu cho nó dưới dạng phần tử nội tuyến

h1 span {
  display: block;
}
h1 span::before {
  content: attr(data-text);
  background: black;
  padding: 1px 8px;
}

Nó hoạt động. Nhưng…

Tôi từ lâu đã là một người hâm mộ thủ thuật giả phần tử, nhưng điều này cảm thấy hơi nguy hiểm vì bạn có thể làm tổn thương khả năng tiếp cận. Tôi nghĩ rằng một số trình đọc màn hình đọc các phần tử giả, nhưng tôi không nghĩ là tất cả, và họ cũng không nên. Chưa kể bạn không thể sao chép và dán tất cả văn bản theo cách này. Ít nhất văn bản vẫn được duy trì hoàn toàn trong HTML

Khai thác cách bố trí bảng

Ý tưởng yêu thích của tôi đến từ Thierry Koblentz. Chỉ cần thực hiện khoảng thời gian

h1 span::before {
  content: "\A";
}

0 và bạn đã hoàn tất. Tất nhiên đó không phải là dữ liệu dạng bảng, nhưng điều đó không thành vấn đề. Thực tế là bạn có thể buộc bố cục bảng từ CSS là tất cả về việc khai thác các thuộc tính bố cục duy nhất của bố cục bảng — không phải ngữ nghĩa

h1 span {
  display: table;
}

Bản demo trực tiếp

Bao gồm cả một nơi mà chúng tôi chỉ sử dụng html8, điều đó tốt

Xem Bút thử ngắt dòng trước và chặn nội tuyến trong tiêu đề của Chris Coyier (@chriscoyier) trên CodePen

Làm cách nào để tách dòng trong CSS?

Làm cách nào để chèn dòng trong CSS?

Làm cách nào để tách văn bản trong CSS?