148

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

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

例如，HTML 换行元素只是为了可视化我想要实现的目标：

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

8 回答 8

288

该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')} }"`;
}
于 2013-06-11T15:21:04.130 回答
34

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

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

如果您需要有两个内联元素，其中一个插入另一个元素中的下一行，您可以通过添加伪元素 :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;
}
于 2013-06-11T15:36:17.780 回答
13

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

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

自动换行似乎是必要的。

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

 &#13;&#10;

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

在此处输入图像描述

于 2016-01-21T00:07:47.993 回答
10

你可以试试这个

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

Js小提琴

于 2013-06-11T15:20:20.813 回答
9

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

Html 字符之类的&#13;&#10;将无法使用 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>

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

于 2018-07-03T09:27:58.230 回答
2

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

.yourclass:before {
    content: 'text here first \A  text here second';
    white-space: pre;
}
于 2018-06-13T09:52:54.963 回答
1

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

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

于 2013-06-11T15:19:49.297 回答
0 
<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模拟换行行为。如果你想替换真正的 <br /> 很有用。

查看这个演示 Codepen：https ://codepen.io/Marko36/pen/RBweYY ，
以及这篇关于响应式站点使用的帖子：响应式换行符：在给定断点模拟 <br />。

于 2018-07-10T19:22:13.373 回答