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

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

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

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

在示例中，HTML break行元素仅用于显示我想要实现的内容：

#headerAgentInfoDetailsPhone::after

{

content: 'Office: XXXXX
Mobile: YYYYY ';

}

elkdee asked 2019-06-30T05:05:34Z

8个解决方案

219 votes

content属性指出：

作者可以通过编写＆＃34; \ A＆＃34;来生成内容中的换行符。 在＆＃39;内容＆＃39;之后的一个字符串中的转义序列 属性。 这个插入的换行符仍然受到白色空间的影响。 属性。 请参阅＆＃34; Strings＆＃34; 和＆＃34;字符和案例＆＃34; 有关＆＃34; \ A＆＃34;的更多信息 逃脱序列。

所以你可以使用：

#headerAgentInfoDetailsPhone:after {

content:"Office: XXXXX \A Mobile: YYYYY ";

white-space: pre; /* or pre-wrap */

}

[http://jsfiddle.net/XkNxs/]

Adrift answered 2019-06-30T05:06:08Z

23 votes

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

一整套惊人的东西伪元素可以做

如果你需要有两个内联元素，其中一个元素突破另一个元素中的下一行，你可以通过添加一个伪元素来实现这一点：在内容之后：＆＃39; \ A＆＃39; 和白色空间：前

HTML

This is the main label

secondary label

CSS

.label:after {

content: '\A';

white-space: pre;

}

underscore answered 2019-06-30T05:06:53Z

8 votes

你可以试试这个

#headerAgentInfoDetailsPhone

{

white-space:pre

}

#headerAgentInfoDetailsPhone:after {

content:"Office: XXXXX \A Mobile: YYYYY ";

}

Js Fiddle

Sachin answered 2019-06-30T05:07:27Z

8 votes

我必须在工具提示中添加新行。 我不得不在我的上面添加这个CSS：之后：

.tooltip:after {

width: 500px;

white-space: pre;

word-wrap: break-word;

}

自动换行似乎是必要的。

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

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

Cédric NICOLAS answered 2019-06-30T05:08:15Z

2 votes

对于那些将要寻找的人来说，如何在伪元素上动态更改内容，添加新的线路符号＆＃34; 在这里回答

像

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

希望这能节省时间，祝你好运:)

Szymon answered 2019-06-30T05:09:15Z

1 votes

在这里发现这个似乎问同样的问题：CSS中的换行字符序列＆＃39;内容＆＃39; 属性？

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

Dryden Long answered 2019-06-30T05:09:53Z

1 votes

Break sentence after the comma, in case of mobile version.

Break sentence after the comma, in case of desktop version.

.mbr和.dbr类可以使用CSS display：table来模拟换行行为。 如果你想要替换真正的＆lt; br /＆gt;，这很有用。

看看这个演示Codepen：[https://codepen.io/Marko36/pen/RBweYY，]

响应网站使用的这篇文章：响应性换行符：模拟＆lt; br /＆gt; 在给定的断点处。

Marko36 answered 2019-06-30T05:10:35Z

1 votes

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

.yourclass:before {

content: 'text here first \A text here second';

white-space: pre;

}

Ashar Zafar answered 2019-06-30T05:11:03Z