Добавить разрыв строки до:: после или:: перед содержимым псевдоэлементов

У меня нет доступа к HTML или PHP для страницы и вы можете редактировать только через CSS. Я делаю изменения на сайте и добавляю текст с помощью псевдоэлементов ::after или ::before и обнаружил, что escape Unicode следует использовать для таких вещей, как пространство до или после добавленного содержимого.

Как добавить несколько строк в свойство content?

В примере элемент строки разрыва HTML должен только визуализировать то, что я хотел бы достичь:

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

Ответ 1

Свойство content:

Авторы могут включать новые строки в сгенерированном контенте, записывая escape-последовательность "\ A" в одной из строк после свойства "content". Этот вставленный разрыв строки по-прежнему зависит от свойства "белого пространства". Подробнее о escape-последовательности "\ A" см. "Строки" и "Символы и регистр".

Итак, вы можете использовать:

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

http://jsfiddle.net/XkNxs/

Ответ 2

Хорошая статья, объясняющая основы (однако она не охватывает разрывы строк).

Целая куча удивительных вещей, которые могут сделать псевдоэлементы

Если вам нужно иметь два встроенных элемента, один из которых разбивается на следующую строку внутри другого элемента, вы можете сделать это, добавив псевдоэлемент: after с содержимым: '\ 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;
}

Ответ 3

Вы можете попробовать это

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

Js Fiddle

Ответ 4

Мне пришлось иметь новые строки в всплывающей подсказке. Мне пришлось добавить этот CSS на мой: after:

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

Слово-обход кажется необходимым.

Кроме того, \A не работал в середине отображаемого текста, чтобы создать новую строку.

 &#13;&#10;

работал. Тогда я смог получить такую подсказку:

Ответ 5

Для людей, которые будут искать "Как динамически изменять содержимое псевдоэлемента с добавлением знака новой строки" здесь ответ

HTML-символы, такие как 
 не сработает добавление их в html с использованием JavaScript, потому что эти символы изменяются при визуализации документа

Вместо этого вам нужно найти 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>

Ответ 6

Нашел здесь этот вопрос, который, похоже, задает одно и то же: Символьная последовательность в символе в содержимом CSS 'content?

Похоже, вы можете использовать \A или \00000a для достижения newline

Ответ 7

Добавить разрыв строки к содержанию ::after или ::before

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

Ответ 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 display: table. Полезно, если вы хотите заменить реальный <br/>.

Проверьте это демо Codepen: https://codepen.io/Marko36/pen/RBweYY,
и этот пост об использовании адаптивного сайта: Отзывчивые разрывы строк: симуляция <br/> в заданных точках останова.