向:: after或:: before伪元素内容添加换行符

我无权访问页面的HTML或PHP，只能通过CSS进行编辑。我一直在网站上进行修改，并通过::after或::before伪元素添加文本，并且发现转义Unicode应该用于添加内容之前或之后的空格等内容。

如何在content属性中添加多行？

在示例中，HTML换行符仅用于可视化我想要实现的目标：

#headerAgentInfoDetailsPhone::after
{
 content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}

该content属性指出：

作者可以通过在“ content”属性之后的字符串之一中写入“ \ A”转义序列来在生成的内容中包括换行符。此插入的换行符仍受“空白”属性的约束。有关“ \ A”转义序列的更多信息，请参见“字符串”和“字符和大小写”。

因此，您可以使用：

#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

http://jsfiddle.net/XkNxs/

但是，在转义任意字符串时，建议使用\00000a而不是\A，因为任何数字或[a-f]字符后跟新行可能会产生不可预测的结果：

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\\"').replace(/\n/g, '\\00000a')} }"`;
}

不错的文章，介绍了基本知识（但是，不包括换行符）。

一整堆惊人的东西伪元素可以做

如果需要两个内联元素，其中一个可以插入另一个元素的下一行，则可以通过添加一个伪元素：after和content：'\ A'和空白：pre来实现此目的。

的HTML

<h3>
    <span class="label">This is the main label</span>
    <span class="secondary-label">secondary label</span>
</h3>

的CSS

.label:after {
    content: '\A';
    white-space: pre;
}

我必须在工具提示中添加新行。我必须在：after上添加此CSS：

.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}

换行似乎是必要的。

此外，\ A不能在文本中间显示，无法强制换行。

 
 

工作。然后，我得到了这样的工具提示：

你可以试试这个

#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}

提斯

对于将要寻找“如何在添加新的行号的伪元素上动态更改内容”的人们，这里的答案

像这样的HTML字符
将无法使用JavaScript将其附加到html，因为这些字符在文档呈现器上已更改

相反，您需要找到此字符的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> 

希望这可以节省别人的时间，祝你好运:)

换行符加入::after或::before伪元素含量

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}

在这里发现了一个似乎在问同样问题的问题：CSS'content'属性中的换行符序列？

看起来您可以使用\A或\00000a实现newline

<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>

该.mbr和.dbr类可以使用CSS模拟线断行为显示：表。如果要替换真正的<br />，则很有用。

看看这个演示Codepen：https://codepen.io/Marko36/pen/RBweYY，
和这个职位上响应现场使用：响应换行符：<br模拟在/>给出断点。