添加换行符到:: after或::之前的伪元素内容

Question

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

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

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

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

Answer 1

content属性声明：

  

作者可以通过在“content”属性之后的一个字符串中写入“\ A”转义序列，在生成的内容中包含换行符。此插入的换行符仍然受“空白”属性的影响。有关“\ A”转义序列的详细信息，请参阅“字符串”和“字符和大小写”。

所以你可以使用：

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

http://jsfiddle.net/XkNxs/

Answer 2

解释基础知识的好文章（不包括换行符）。

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

如果你需要有两个内联元素，其中一个元素突破另一个元素中的下一行，你可以通过添加一个伪元素来实现这一点：后面有内容：'\ A'和white-space：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;
}

Answer 3

你可以试试这个

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

Js Fiddle

Answer 4

我必须在工具提示中添加新行。我不得不在我的：after：

上添加这个CSS

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

包装似乎是必要的。

此外，\ A还没有在文本中间显示，强制换行。

 
 

的工作。然后我就能得到这样一个工具提示：

Answer 5

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

像
这样的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> 

希望这可以节省一些时间，祝您好运：）

Answer 6

在这里发现这个问题似乎问了同样的事情：Newline character sequence in CSS 'content' property?

您似乎可以使用\A或\00000a来获得newline

Answer 7

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

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

Answer 8

<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 display：table 模拟换行行为。如果您要替换真正的
，则很有用。

查看此演示Codepen：https://codepen.io/Marko36/pen/RBweYY，
响应式网站上的帖子使用：Responsive line-breaks: simulate <br /> at given breakpoints。