Hướng dẫn css force line break - css ngắt dòng lực

• Dòng phá vỡ giữa các dòng văn bản
• Dòng phá vỡ giữa các phần tử HTML

Đặt Hiển thị: Khối; Trên phần tử:

Dòng phá vỡ giữa các dòng văn bản

Dòng phá vỡ giữa các phần tử HTML

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

Vì vậy, hãy để một hành trình. Một hành trình trong đó chúng tôi nói rằng, nhưng rất nhiều.

p { white-space: pre-line; }

<!-- Sample Markup -->
<p>
    Lorem ipsum dolor sit amet. 
    Consectetur adipiscing elit. 
    Mauris eget pellentesque lacus.
</p>

Thay vì

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

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

Dòng phá vỡ giữa các phần tử HTML

Đặt Hiển thị: Khối; Trên phần tử:

1. Đặt Hiển thị: Khối; Trên phần tử:

   Đây có thể là một trong những rõ ràng nhất; Một phần tử cấp khối bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn cho nó. Vì vậy, bạn có thể sử dụng phần tử cấp khối hoặc đặt bất kỳ thuộc tính CSS của phần tử HTML nào thành

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

   7.

2. Sử dụng ký tự trả về vận chuyển (\ A) làm nội dung trong phần tử giả:

   Bạn có thể thêm một dòng mới bằng cách sử dụng các yếu tố giả

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

   8 hoặc ____29 như vậy:

   span::before { content: '\A'; white-space: pre; }
   

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

   0

   Thuộc tính

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

   1 trong trường hợp này rất quan trọng để hoạt động này. Cũng lưu ý rằng, cài đặt

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

   1 sẽ giữ văn bản trong cùng một dòng. Để hoạt động này, thuộc tính

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

   2 phải được đặt thành

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

   3.

Hy vọng bạn tìm thấy bài viết này hữu ích. Nó được xuất bản ngày 15 tháng 5 năm 2018 (và được sửa đổi lần cuối 03 tháng 6 năm 2020). Hãy thể hiện tình yêu và sự hỗ trợ của bạn bằng cách chia sẻ bài đăng này.