如何使用CSS在元素之后插入换行符而不是之前？

Question

例如： HTML：

The quick brown fox <span class="break">{BREAK}</span> jumps over the lazy dog.

我希望它显示为：

The quick brown fox {BREAK}

jumps over the lazy dog.

我研究了display属性，但display:inline;不会在任何地方换行，display:block会在两侧插入换行符。

我还研究了:after伪类，但.break:after{content:"\000A";}最终呈现为空格，而不是换行符。

- Matt

---

像这样吗？在那种情况下，您也可以只使用div。 - Jacques ジャック

@Jack 不，不改变 HTML 结构。 - Matt

你为什么不直接在HTML中使用“<br>”呢？ - Jukka K. Korpela

@JukkaK.Korpela 我希望它可以自定义是否有换行。 - Matt

SLaks的解决方案很好，但你也可以将span.break设置为显示块。这样更简单，代码更少，而且跨浏览器兼容。http://jsfiddle.net/bMKrc/1/ - Jacques ジャック

可能是使用仅CSS的换行符（如<br>）的重复问题。 - user

Answer 1

默认情况下，HTML 元素忽略空格。
您需要更改它：

.break:after {
    content:"\000A";
    white-space: pre;
}

- SLaks

---

谢谢，可以了！15分钟过后我会接受的。 - Matt

在我的情况下，它只有在我放置文本时才能正常工作，为什么？！ - shareef

@shareef：你在说什么？发生了什么事情？ - SLaks

@Slaks，你能解释一下这段代码在做什么吗？我刚看到答案，它可以工作，但我想了解它在做什么。（谢谢） - TolMera

Answer 2

http://jsfiddle.net/bMKrc/1/

html:

The quick brown fox <span class="break"></span> jumps over the lazy dog.

CSS：

.break{
    display:block;
}

这就是你需要的全部内容。 display:block 可能会导致两侧断开，但它不会造成额外的空行。查看我的 fiddle 示例。

- Jacques ジャック

---

@Matt 只因为楼主说了什么并不意味着它是真的。你可以通过使用 display block 来实现所需的结果。如果你不相信我，请查看我的 fiddle。 - Jacques ジャック

如果有些混淆，"{BREAK}"仍然应该是文本的一部分。 - Matt

哦，那没什么意义，但这不是我的项目。我以为他在展示放置断点的位置。但这并不足以让你粗鲁。 - Jacques ジャック

好的，如果我表现得粗鲁了，我向你道歉。它不太有意义的原因是因为我只给出了一个解释性的问题示例，而不是我的实际问题。 - Matt

jsfiddle.net非常清晰明了。我尝试了许多方法来在一个按钮内同时放置一个img和Angular {{}}绑定之间插入换行符，而这是唯一有效的方法。如果你将其命名为lineBreak类，那么代码中就会变得非常易懂。 - Mike_Laird

那么，为什么不使用 <br> 呢？ - Max Yari