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

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

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

例如，我想要实现的 HTML 断行元素是 只是为了观想:

#headerAgentInfoDetailsPhone::after {
content: 'Office: XXXXX <br /> Mobile: YYYYY ';
}
190991 次浏览
小开

发现这个问题似乎问了同样的问题: 新行字符序列在 CSS & # 39; 内容 & # 39; 属性？

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

小开

你可以试试这个

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

Js Fiddle

小开
最佳答案

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')} }"`;
}
小开

解释基础知识的好文章(不过没有涉及换行)。

一大堆神奇的伪元素能做的事

如果需要有两个内联元素，其中一个在另一个元素中分隔成下一行，那么可以通过添加带 content: ‘ A’和 white-space: pre 的伪元素: after 来实现这一点

超文本标示语言

<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;
}
小开

我必须在工具提示中添加新的行，我必须在: 之后添加 CSS:

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

这个词的包装似乎是必要的。

此外，A 不工作在文本的中间显示，以迫使一个新的行。

 &#13;&#10;

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

enter image description here

小开

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

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

对于那些想要寻找“如何在伪元素上动态更改内容并添加新的行号”的人来说，这里有一个答案

像 &#13;&#10;这样的 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>

Hope this save someones time, good luck :)

小开 
<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 显示器: 表模拟换行行为。如果要替换 real < br/> ，则使用。

看看这个演示代码: https://codepen.io/Marko36/pen/RBweYY,
以及这篇关于响应站点使用的文章: 响应的换行符: 在给定的断点处模拟 < br/> 。


提交答案