Có thể trong css thuần túy, tức là không thêm các thẻ html bổ sung, để ngắt dòng như thế <br>nào không? Tôi muốn ngắt dòng sau <h4>phần tử, nhưng không phải trước:
HTML
<li>
Text, text, text, text, text. <h4>Sub header</h4>
Text, text, text, text, text.
</li>
CSS
h4 {
display: inline;
}
Tôi đã tìm thấy nhiều câu hỏi như thế này, nhưng luôn có các câu trả lời như "use display: block;" , mà tôi không thể làm, khi <h4>phải ở trên cùng một dòng.
Câu trả lời:
Nó hoạt động như thế này:
h4 {
display:inline;
}
h4:after {
content:"\a";
white-space: pre;
}
Ví dụ: http://jsfiddle.net/Bb2d7/
Thủ thuật đến từ đây: https://stackoverflow.com/a/66000/509752 (để có thêm lời giải thích)
\anghĩa là ngắt dòng, ký tự U + 000A và white-space: preyêu cầu trình duyệt coi đó là ngắt dòng trong kết xuất.
white-spacetrên :afterpseudo-yếu tố, trong đó có chỉ là ngắt dòng. Và nó là cần thiết vì trong HTML, theo mặc định, ngắt dòng trong nội dung phần tử tương đương với một khoảng trắng và không gây ra ngắt dòng trong tài liệu được kết xuất.
margin-bottomsẽ giúp bạn đạt được điều đó.
margin-bottomsẽ đặt h4 ở cùng dòng với văn bản trước đó?
Bạn có thể sử dụng ::afterđể tạo 0pxkhối -height sau dấu <h4>, có hiệu quả di chuyển bất cứ thứ gì sau khối này <h4>sang dòng tiếp theo:
h4 {
display: inline;
}
h4::after {
content: "";
display: block;
}<ul>
<li>
Text, text, text, text, text. <h4>Sub header</h4>
Text, text, text, text, text.
</li>
</ul>