Html 仅使用 css 的换行符（如 <br>）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10933837/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Line break (like <br>) using only css
提问by Steeven
Is it possible in pure css, that is without adding additional html tags, to make a line break like <br>? I want the line break after the <h4>element, but not before:
是否可以在纯 css 中（即不添加额外的 html 标签）进行换行，例如<br>？我想要<h4>元素之后的换行符，而不是之前：
HTML
HTML
<li>
Text, text, text, text, text. <h4>Sub header</h4>
Text, text, text, text, text.
</li>
CSS
CSS
h4 {
display: inline;
}
I have found many questions like this, but always with answers like "use display: block;", which I can't do, when the <h4>must stay on the same line.
我发现了很多这样的问题，但总是有“使用显示：块；”之类的答案。，我不能这样做，当<h4>必须保持在同一条线上。
回答by adriantoine
It works like this:
它是这样工作的：
h4 {
display:inline;
}
h4:after {
content:"\a";
white-space: pre;
}
Example: http://jsfiddle.net/Bb2d7/
示例：http: //jsfiddle.net/Bb2d7/
The trick comes from here: https://stackoverflow.com/a/66000/509752(to have more explanation)
诀窍来自这里：https: //stackoverflow.com/a/66000/509752（有更多解释）
回答by Philip Kirkbride
回答by 0b10011
You can use ::afterto create a 0px-height block after the <h4>, which effectively moves anything after the <h4>to the next line:
您可以::after在 之后创建一个0px-height 块<h4>，它可以有效地将 之后的任何内容移动<h4>到下一行：
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>