我记得有一种方法可以使用 CSS content 属性在元素前插入换行标签，但显然这样是不起作用的：
#restart:before { content: '<br/>'; }
但是你如何做到这一点呢？
如何使用CSS在元素前插入换行符
197
- mheavers
3
3CSS不是用于添加或编辑内容的，而是用于控制内容显示方式的。 - Todd Moses
47在我看来，布局和排版（包括换行）明显属于CSS的范畴。 - Trevor
15CSS 绝对是为添加或编辑内容而存在的，当它是主题中一部分的一致样式元素时。特别是对于像 WordPress 这样的内容管理系统，它很有用，因为这些系统不允许您编辑内容。这就是为什么存在“content”属性，用于添加和/或编辑内容。 - Fei Lauren
16个回答
308
- bookcasey
6
13也可以尝试使用 white-space: pre-wrap; 让文本换行。 - Jazzy
6好的，需要翻译的内容是：太棒了。不过需要注意，为了使这个起作用，“#restart”也必须是“display:inline;”。 - Troy Alford
27这对我没起作用，我使用了
：before { content: ' '; display: block; }代替。 - Bogdanio2由于某些原因，所有的解决方案都不能处理
inline-block元素。实际上它们只是不会进入下一行。唯一的解决方案是在HTML中添加一个空的<div></div>。 - Adam Reis5如果这条线没有断开，你可以使用 'white-space' 属性 :before { content: '\A'; white-space: pre; }。 - Amr
:before { content: ' '; display: block; } 在我的情况下非常有效。谢谢！ - Tobias Gaertner
41
如果
```css #restart { display: block; } ```
#restart是一个内联元素（例如<span>，<em>等），那么您可以使用以下代码将其转换为块级元素：```css #restart { display: block; } ```
#restart { display: block; }
这将确保在元素之前和之后都有换行的效果。
CSS没有一种方法可以插入类似于换行符的东西，只能在元素之前而不是之后。您可以通过其他改变的副作用来导致换行，例如float:left，或在浮动元素后使用clear:left，甚至像#restart:before { content: 'a load of non-breaking spaces'; }这样疯狂的内容，但在一般情况下，这可能不是一个好主意。
- bobince
3
1它不能是display:block - 因为那样我需要显示元素的宽度，以防止其背景跨越整个页面。它需要能够自动设置元素的宽度。 - mheavers
3一个
float: left的元素可能会有所帮助，因为它们具有收缩到适合宽度并在新行上开始的特性。否则，您想要的可能无法实现。 - bobince有时候开发人员在大型项目中工作，他们无法控制或不能决定采用另一种解决方案，因此会被踩。 - eyurdakul
22
这适用于我：
#restart:before {
content: ' ';
clear: right;
display: block;
}
- hutorny
2
出于某些原因，各种 Unicode 换行符似乎对我无效了……？不过这个解决方案真的起作用了——谢谢！ - Gene Bo
1是的，但当你也必须将文本放入内容中时会发生什么？！[答案]（https://dev59.com/1Ws05IYBdhLWcg3wPfcR#11750985） - iorgv
18
以下 CSS 对我有效：
/* newline before element */
#myelementId:before{
content:"\a";
white-space: pre;
}
- rluks
2
优秀的想法，使用纯CSS。 - Naveen DA
对我来说非常好用。我正在使用这个：
content: 'bar: \a' attr(data-description); - Jimmy Adaro11
你不能以你想要的方式通过CSS添加生成内容有两个原因：
生成的内容接受内容而不是标记。标记将不被评估但只会被显示。
:before和:after生成的内容添加在元素内部，因此即使添加一个空格或字母并将其定义为block也不起作用。
有一个::outside伪元素可能实现你的需求。然而，似乎没有任何浏览器支持它。（在这里阅读更多：http://www.w3.org/TR/css3-content/#wrapping）
最好的方法是在这里使用一点jQuery：
$('<br />').insertBefore('#restart');
- Jason Gennaro
1
使用CSS。我找到了一个类似于Jesse Kinsman的答案。 - RonnyKnoxville
11
只需在伪元素:before中插入一个Unicode换行符即可：
#restart::before { content: '\00000A'; }<p>
The quick brown fox
<span id="restart">jumps over the lazy dog</span>
</p>- Jesse Kinsman
1
这似乎不起作用。 - Andy
6
是的，完全可以实现，但这绝对是一种完全的黑客代码（人们可能会因为写这样的代码而给你一个鄙视的眼神）。
以下是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/
- mw1
2
+1 鼓励创意。我有一个来自外部源的东西，无法更改实际的 HTML... 这似乎完美地运作 :) 谢谢！ - counterbeing
由于字体大小为0，这甚至对屏幕阅读器也是隐藏的，并且似乎不会将内容分成几个单独读取的部分。 - Andy
3
请尝试以下操作：
#restart::before {
content: '';
display: block;
}
- user
1
一个提示：至少添加一行注释，这样您的帖子就不会默认进入VLQQ了。 - Deduplicator
2
您可以使用
<br>标签填充您的文档，并像其他标签一样使用CSS打开\关闭它们：<style>
.hideBreaks {
display:none;
}
</style>
<html>
just a text line<br class='hideBreaks'> for demonstration
</html>
- JackHammer
2
使用CSS在文本前添加换行，可以使用::before伪元素以及content属性，并将其设置为"\A"，表示换行。以下是一个示例：
.myElement::before {
content: "\A";
white-space: pre;
}
在上面的代码中，.myElement代表你想要在文本之前添加新行的元素的选择器。::before伪元素会在元素内容之前插入内容。content属性被设置为"\A"，表示换行。white-space: pre; 属性用于保留空白字符，包括换行符。
根据你特定元素的类或ID，可以调整选择器(.myElement)，并且可以将这个CSS应用到任何想在文本之前添加新行的元素上。
- qɐʇǝɥɐW
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接