在伪元素内容的::后或::前添加换行符。

Question

我无法接触到一个页面的HTML或PHP，只能通过CSS进行编辑。我一直在对一个网站进行修改，并通过CSS来添加文字。::after 或 ::before 伪元素，并且发现在添加内容前后有空格等情况下应该使用转义Unicode。

如何在 content 属性？

例如，HTML中的断行元素是 只为直观 我想实现什么。

#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.netXkNxs

然而，当转义任意字符串时，建议使用 \00000a 而不是 \A因为任何数字或 [a-f] 字符后的新行可以给 天有不测风云:

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

Answer 2

很好的文章，解释了基础知识(但不包括换行符)。

伪元素可以做的一大堆惊人的事情。

如果你需要两个内联元素，其中一个元素在另一个元素中进入下一行，你可以通过添加一个伪元素:after来实现，内容为:'\A'，空格为:pre。

超文本标记语言

<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

我必须在工具提示中加入新的行。我不得不在我的 :after .css上添加这个CSS。

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

文字包装似乎是必要的。

此外，在文本中间的\A没有工作，以显示，强制一个新的行。

 
 

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

Answer 4

你可以试试这个

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

Js Fiddle

Answer 5

对于将寻找'如何动态改变伪元素的内容，添加新的行号'的人来说，这里有答案。

Html字符，如 
 使用JavaScript将无法将它们添加到html中，因为这些字符会在文档渲染时发生变化。

相反，你需要找到这个字符的U+000D和U+000A的unicode表示，所以我们可以做这样的事情

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

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

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

Answer 7

在这里找到了这个问题，似乎问的是同样的问题。CSS'content'属性中的换行字符序列？

看起来你可以使用 \A 或 \00000a 以达到 newline

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模拟断行行为。显示：表格. 如果你想替换真正的<br >，这很有用。

检查出这个演示Codepen。https:/codepen.ioMarko36penRBweYY。以及这篇关于响应式网站使用的文章。响应式断行：在给定的断点处模拟<br > 。.