我记得有一种方法可以使用 CSS content 属性在元素前插入换行标签,但显然这样是不起作用的:
#restart:before { content: '<br/>'; }
但是你如何做到这一点呢?
我记得有一种方法可以使用 CSS content 属性在元素前插入换行标签,但显然这样是不起作用的:
#restart:before { content: '<br/>'; }
但是你如何做到这一点呢?
:before { content: ' '; display: block; }
代替。 - Bogdanioinline-block
元素。实际上它们只是不会进入下一行。唯一的解决方案是在HTML中添加一个空的<div></div>
。 - Adam Reis#restart
是一个内联元素(例如<span>
,<em>
等),那么您可以使用以下代码将其转换为块级元素:#restart { display: block; }
这将确保在元素之前和之后都有换行的效果。
CSS没有一种方法可以插入类似于换行符的东西,只能在元素之前而不是之后。您可以通过其他改变的副作用来导致换行,例如float:left
,或在浮动元素后使用clear:left
,甚至像#restart:before { content: 'a load of non-breaking spaces'; }
这样疯狂的内容,但在一般情况下,这可能不是一个好主意。
float: left
的元素可能会有所帮助,因为它们具有收缩到适合宽度并在新行上开始的特性。否则,您想要的可能无法实现。 - bobince这适用于我:
#restart:before {
content: ' ';
clear: right;
display: block;
}
以下 CSS 对我有效:
/* newline before element */
#myelementId:before{
content:"\a";
white-space: pre;
}
content: 'bar: \a' attr(data-description);
- Jimmy Adaro你不能以你想要的方式通过CSS添加生成内容有两个原因:
生成的内容接受内容而不是标记。标记将不被评估但只会被显示。
:before
和:after
生成的内容添加在元素内部,因此即使添加一个空格或字母并将其定义为block
也不起作用。
有一个::outside
伪元素可能实现你的需求。然而,似乎没有任何浏览器支持它。(在这里阅读更多:http://www.w3.org/TR/css3-content/#wrapping)
最好的方法是在这里使用一点jQuery:
$('<br />').insertBefore('#restart');
只需在伪元素:before中插入一个Unicode换行符即可:
#restart::before { content: '\00000A'; }
<p>
The quick brown fox
<span id="restart">jumps over the lazy dog</span>
</p>
是的,完全可以实现,但这绝对是一种完全的黑客代码(人们可能会因为写这样的代码而给你一个鄙视的眼神)。
以下是HTML代码:
<div>lorem ipdum dolor sit <span id="restart">amit e pluribus unum</span></div>
#restart:before { content: 'hiddentext'; font-size:0; display:block; line-height:0; }
请尝试以下操作:
#restart::before {
content: '';
display: block;
}
<br>
标签填充您的文档,并像其他标签一样使用CSS打开\关闭它们:<style>
.hideBreaks {
display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>
使用CSS在文本前添加换行,可以使用::before伪元素以及content属性,并将其设置为"\A",表示换行。以下是一个示例:
.myElement::before {
content: "\A";
white-space: pre;
}