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

For example:

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}

快速的棕色狐狸{BREAK}

jumps over the lazy dog.

跳过懒狗。

I looked into the display property, but display:inline; doesn't break anywhere and display:block puts breaks on both sides.

我查看了display属性,但是显示:inline;不会破坏任何地方并显示:阻止双方打破。

I also looked into the :after pseudo-class, but .break:after{content:"\000A";} ends up rendering as a space, rather than a line feed.

我还查看了:在伪类之后,但.break:在{content:“\ 000A”;}之后最终呈现为空格而不是换行符。

2 个解决方案

#1

By default, HTML elements ignore whitespace.
You need to change that:

默认情况下,HTML元素会忽略空格。你需要改变这个:

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

#2

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

html:

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

快速的棕色狐狸 跳过懒狗。

CSS:

.break{
    display:block;
}

And that's all you need. display:block may cause it to break on both sides, but it does not cause there to be an extra line. View my fiddle.

这就是你所需要的一切。 display:block可能会导致它在两侧都断开,但它不会导致额外的行。查看我的小提琴。