html - 如何使用 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";}最终呈现为空格，而不是换行符。

score 31 · Accepted Answer

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

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

score 3 · Accepted Answer

html:

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

CSS：

.break{
    display:block;
}

这就是你所需要的。display:block可能会导致它在两侧断裂，但不会导致多余的线。查看我的小提琴。

2 回答 2