如何使用CSS在元素前插入换行符

Question

我觉得我看到了一种方法,使用CSS内容属性,在元素之前插入换行标记.显然这不起作用:

#restart:before { content: '<br/>'; }

但是你怎么做的？

Answer 1

可以在psuedo-element生成的内容中使用\A 转义序列.阅读 CSS2规范中的更多内容.

#restart:before { content: '\A'; }

您可能还需要添加white-space:pre;到#restart.

注意:\A表示一行的结尾.

ps另一种治疗方法

:before { content: ' '; display: block; }

Answer 2

如果#restart是内联元素(例如<span>,<em>等),那么您可以使用以下方法将其转换为块元素:

#restart { display: block; }

这样可以确保元素前后的换行.

没有办法让CSS 在元素之前插入仅像换行符那样的东西,而不是之后.你或许可以在之前作为其他变化的副作用float: left,或者clear: left在浮动元素之后,甚至是疯狂的事情之前引起换行,#restart:before { content: 'a load of non-breaking spaces'; }但在一般情况下这可能不是一个好主意.

Answer 3

这对我有用:

#restart:before {
    content: ' ';
    clear: right;
    display: block;
}

Answer 4

只需在before伪元素中放入一个unicode换行符:

#restart:before { content: '\00000A'; }

Answer 5

有两个原因导致您无法以您希望的方式通过CSS添加生成的内容:

1. 生成的内容接受内容而不是标记.标记不会被评估,只会显示.

2. :before并且:after生成的内容将添加到元素中,因此即使添加空格或字母并将其定义为block也不起作用.

有一个::outside伪元素可能会做你想要的.但是,似乎没有浏览器支持.(在这里阅读更多内容:http://www.w3.org/TR/css3-content/#wrapping)

最好的选择是在这里使用一些jQuery:

$('<br />').insertBefore('#restart');

示例: http ://jsfiddle.net/jasongennaro/sJGH9/1/

Answer 6

以下CSS为我工作:

/* newline before element */
#myelementId:before{
    content:"\a";
    white-space: pre;
}

Answer 7

是的，完全可行，但这绝对是一个彻头彻尾的黑客（人们可能会因为编写这样的代码而对你投以鄙视）。

这是 HTML：

<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>

这是CSS：

#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }

这是小提琴： http: //jsfiddle.net/AprNY/