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

Posted 2023-02-22

【中文标题】在 ::after 或 ::before 伪元素内容中添加换行符

【英文标题】：Add line break to ::after or ::before pseudo-element content

【发布时间】：2013-06-07 12:20:47

【问题描述】：

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

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

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

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

【问题讨论】：

CSS 不是用于添加或编辑内容，而是用于控制内容的显示方式

@SamithaHewawasam 虽然我同意你的说法，但看起来发帖人发现自己处于无法编辑 HTML 的境地。对于小的、简单的内容添加，我可以理解为什么这会有用/必要。

Newline character sequence in CSS 'content' property?的可能重复

How to insert a line break before an element using CSS的可能重复

我还认为换行符与格式相关的程度远高于与内容相关的程度。您“看到”换行符的唯一方法是观察内容中的格式变化。

【参考方案1】：

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] 字符后跟新行都可能给出unpredictable results：

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

【讨论】：

有一瞬间我想“为什么是 \A 而不是 \n” - 然后我记得换行符是 0x0A :)

我在打印媒体查询中试过这个，它不起作用。这是一个错误还是默认行为？没有印刷媒体，它可以工作。

感谢您提及pre-wrap！我遇到了#headerAgentInfoDetailsPhone 的问题不再包装在像 Chrome 这样的 Blink 引擎网络浏览器中。 Firefox 不易受到传播回元素的 white-space: pre; 属性的影响。

巴别塔给我The only valid numeric escape in strict mode is '\0'

【参考方案2】：

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

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

【参考方案3】：

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

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

如果您需要两个内联元素，其中一个插入到另一个元素中的下一行，您可以通过添加伪元素 :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;

【参考方案4】：

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

【讨论】：

要求提供 CSS 而不是 HTML 解决方案。

但是如果其他人正在搜索“在 ::after 或 ::before 伪元素内容中添加换行符”并登陆这里，但实际上可以编辑他的 HTML，他们可能会有所帮助，对吧？

【参考方案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> 

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

【参考方案6】：

我必须在工具提示中添加新行。我必须在我的 :after 上添加这个 CSS ：

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

自动换行似乎是必要的。

另外，\A 在要显示的文本中间不起作用，强制换行。

 
 

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

【参考方案7】：

你可以试试这个

#headerAgentInfoDetailsPhone

    white-space:pre

#headerAgentInfoDetailsPhone:after 
    content:"Office: XXXXX \A Mobile: YYYYY ";

Js Fiddle

【参考方案8】：

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

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