Html 如何使用 CSS 在元素之后而不是之前插入换行符？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19099873/
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
How can I use CSS to insert a line break after but not before an element?
提问by Matt
For example:
例如：
HTML:
HTML：
The quick brown fox <span class="break">{BREAK}</span> jumps over the lazy dog.
I want this to display:
我希望这个显示：
The quick brown fox {BREAK}
jumps over the lazy dog.
快速的棕色狐狸{BREAK}
跳过懒狗。
I looked into the displayproperty, but display:inline;doesn't break anywhere and display:blockputs breaks on both sides.
我查看了该display物业，但display:inline;没有在任何地方display:block破裂，并且在双方都有休息。
I also looked into the :afterpseudo-class, but .break:after{content:"\000A";}ends up rendering as a space, rather than a line feed.
我还研究了:after伪类，但.break:after{content:"\000A";}最终呈现为一个空格，而不是一个换行符。
回答by SLaks
By default, HTML elements ignore whitespace.
You need to change that:
默认情况下，HTML 元素会忽略空格。
你需要改变这一点：
.break:after {
content:".break{
display:block;
}
0A";
white-space: pre;
}
回答by Jacques ジャック
html:
html：
The quick brown fox <span class="break"></span> jumps over the lazy dog.
The quick brown fox <span class="break"></span> jumps over the lazy dog.
CSS:
CSS：
##代码##And that's all you need. display:blockmay cause it to break on both sides, but it does not cause there to be an extra line. View my fiddle.
这就是你所需要的。display:block可能会导致它在两侧断裂，但不会导致额外的线。查看我的小提琴。
