CSS 向 ::after 或 ::before 伪元素内容添加换行符
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17047694/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add line break to ::after or ::before pseudo-element content
提问by elkdee
I do not have access to the HTML or PHP for a page and can only edit via CSS. I've been doing modifications on a site and adding text via the ::afteror ::beforepseudo-elements and have found that escape Unicode should be used for things such as a space before or after the added content.
我无法访问页面的 HTML 或 PHP，只能通过 CSS 进行编辑。我一直在对站点进行修改并通过::after或::before伪元素添加文本，并且发现应该将转义 Unicode 用于添加内容之前或之后的空格等内容。
How do I add multiple lines in the contentproperty?
如何在content属性中添加多行？
In example the HTML break line element is only to visualizewhat I would like to achieve:
在示例中，HTML break line 元素只是为了可视化我想要实现的目标：
#headerAgentInfoDetailsPhone::after
{
content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}
回答by adrift
The contentproperty states:
该content物业指出：
Authors may include newlines in the generated content by writing the "\A" escape sequence in one of the strings after the 'content' property. This inserted line break is still subject to the 'white-space' property.See "Strings" and "Characters and case" for more information on the "\A" escape sequence.
作者可以通过在 'content' 属性之后的字符串之一中写入“\A”转义序列，在生成的内容中包含换行符。此插入的换行符仍受“空白”属性的约束。有关“\A”转义序列的更多信息，请参阅“字符串”和“字符和大小写”。
So you can use:
所以你可以使用：
#headerAgentInfoDetailsPhone:after {
content:"Office: XXXXX \A Mobile: YYYYY ";
white-space: pre; /* or pre-wrap */
}
When escaping arbitrary strings, however, it's advisable to use \00000ainstead of \A, because any number or [a-f]character followed by the new line may give unpredictable results:
但是，在转义任意字符串时，建议使用\00000a代替\A，因为任何数字或[a-f]字符后跟新行都可能产生不可预测的结果：
function addTextToStyle(id, text) {
return `#${id}::after { content: "${text.replace(/"/g, '\"').replace(/\n/g, '\00000a')} }"`;
}
回答by underscore
Nice article explaining the basics (does not cover line breaks, however).
很好的文章解释了基础知识（但是不包括换行符）。
A Whole Bunch of Amazing Stuff Pseudo Elements Can Do
If you need to have two inline elements where one breaks into the next line within another element, you can accomplish this by adding a pseudo-element :after with content:'\A' and white-space: pre
如果您需要有两个内联元素，其中一个插入另一个元素中的下一行，您可以通过添加一个伪元素 :after with content:'\A' 和 white-space: pre 来实现
HTML
HTML
<h3>
<span class="label">This is the main label</span>
<span class="secondary-label">secondary label</span>
</h3>
CSS
CSS
.label:after {
content: '\A';
white-space: pre;
}
回答by Cédric NICOLAS
I had to have new lines in a tooltip. I had to add this CSS on my :after :
我必须在工具提示中有新行。我不得不在我的 :after 上添加这个 CSS：
.tooltip:after {
width: 500px;
white-space: pre;
word-wrap: break-word;
}
The word-wrap seems necessary.
自动换行似乎是必要的。
In addition, the \A didn't work in the middle of the text to display, to force a new line.
另外，\A 在要显示的文本中间不起作用，强制换行。
worked. I was then able to get such a tooltip :
工作。然后我能够获得这样的工具提示：
回答by Sachin
回答by Szymon
For people who will going to look for 'How to change dynamically content on pseudo element adding new line sign" here's answer
对于将要寻找“如何在伪元素上动态更改内容添加新行符号”的人，这里是答案
Html chars like will not work appending them to html using JavaScript because those characters are changed on document render
使用 JavaScript 将它们附加到 html 之类的 Html 字符将不起作用，因为这些字符在文档呈现时发生了更改
Instead you need to find unicode representation of this characters which are U+000D and U+000A so we can do something like
相反，您需要找到这些字符的 unicode 表示，即 U+000D 和 U+000A，这样我们就可以做类似的事情
var el = document.querySelector('div');
var string = el.getAttribute('text').replace(/, /, '\u000D\u000A');
el.setAttribute('text', string);div:before{
content: attr(text);
white-space: pre;
}<div text='I want to break it in javascript, after comma sign'></div> Hope this save someones time, good luck :)
希望这能节省别人的时间，祝你好运:)
回答by Ashar Zafar
Add line break to ::afteror ::beforepseudo-element content
向::after或::before伪元素内容添加换行符
.yourclass:before {
content: 'text here first \A text here second';
white-space: pre;
}
回答by Dryden Long
Found this question here that seems to ask the same thing: Newline character sequence in CSS 'content' property?
在这里发现这个问题似乎在问同样的事情：CSS 'content' 属性中的换行符序列？
Looks like you can use \Aor \00000ato achieve a newline
看起来你可以使用\A或\00000a实现一个newline
回答by marko-36
<p>Break sentence after the comma,<span class="mbr"> </span>in case of mobile version.</p>
<p>Break sentence after the comma,<span class="dbr"> </span>in case of desktop version.</p>
The .mbrand .dbrclasses can simulate line-break behavior using CSS display:table. Useful if you want to replace real <br />.
该.mbr和.dbr类可以使用CSS模拟线断行为显示：表。如果你想替换真正的 <br /> 很有用。
Check out this demo Codepen: https://codepen.io/Marko36/pen/RBweYY,
and this post on responsive site use: Responsive line-breaks: simulate <br /> at given breakpoints.
查看此演示 Codepen：https://codepen.io/Marko36/pen/RBweYY ，
以及有关响应式站点使用的这篇文章：响应式换行符：在给定断点处模拟 <br />。
