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

Question

例如：

HTML：

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

我想要显示：

  

快速棕色狐狸{BREAK}

     

跳过懒狗。

我查看了display属性，但display:inline;并未在任何地方中断，而display:block会在两边都有中断。

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

Answer 1

默认情况下，HTML元素会忽略空格 您需要change that：

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

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可能导致它在两侧都断裂，但它不会导致额外的线路。查看我的小提琴。