只使用 css 的换行(如 < br >)

是否可能在纯 css 中，即不添加附加的 html 标记，使行分隔符像 <br>？我希望换行符在 <h4>元素之后，而不是之前:

超文本标示语言

<li>
Text, text, text, text, text. <h4>Sub header</h4>
Text, text, text, text, text.
</li>

CSS

h4 {
display: inline;
}

我已经发现很多这样的问题，但总是与答案像 “使用显示器: 块;”，我不能这样做，当 <h4>必须留在同一行。

157705 次浏览

小开

Try

h4{ display:block;}

in your css

小开

You can use ::after to create a 0px-height block after the <h4>, which effectively moves anything after the <h4> to the next line:

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>

小开

最佳答案

It works like this:

h4 {
display:inline;
}
h4:after {
content:"\a";
white-space: pre;
}

The trick comes from here: https://stackoverflow.com/a/66000/509752 (to have more explanation)

小开

I know I'm late to the party but here's my two cents.

CSS

li h4 {
break-after: always;
}


li h4::after {
display: block;
content: " ";
}