Додати перерив рядка до :: after або :: перед вмістом псевдоелементів

Я не маю доступу до HTML або PHP для сторінки і можу редагувати лише через CSS. Я робив зміни на сайті і додавав текст через ::afterабо ::beforeпсевдоелементи і виявив, що Escod Unicode слід використовувати для таких речей, як пробіл до або після доданого вмісту.

Як додати кілька рядків у contentвласність?

Наприклад, елемент рядка HTML перерив - це лише для наочності того, що я хотів би досягти:

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

У contentвласності держави:

Автори можуть включати нові рядки в створений вміст, записуючи послідовність "\ A" в одну з рядків після властивості "content". Цей вставлений розрив рядка все ще підпадає під властивість "white-space". Див. "Строки" та "Символи та регістр" для отримання додаткової інформації про послідовність втечі "\ 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')} }"`;
}

Хороша стаття, що пояснює основи (однак не охоплює розриви рядків).

Цілий букет дивовижних псевдоелементів елементів може зробити

Якщо вам потрібно мати два вбудовані елементи, коли один переходить у наступний рядок у межах іншого елемента, ви можете досягти цього, додавши псевдоелемент: after з вмістом: '\ A' та white-space: 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;
}

Мені довелося мати нові рядки в підказці. Мені довелося додати цей CSS на моєму: after:

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

Словообгортання здається необхідним.

Крім того, \ A не працювало в середині тексту для відображення, щоб примусити новий рядок.

 
 

працювали. Тоді я зміг отримати таку підказку:

Ви можете спробувати це

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

Js Fiddle

Для людей, які будуть шукати "Як динамічно змінювати вміст на псевдоелементі, додаючи новий знак рядка", ось відповідь

Символи Html як 
не працюватимуть, додаючи їх до html за допомогою JavaScript, оскільки ці символи змінені під час відображення документа

Натомість вам потрібно знайти представлення унікоду цих символів, які є 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> 

Сподіваюся, це заощадить хтось час, удачі :)

Додати розрив рядка до вмісту ::afterабо ::beforeпсевдоелементів

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

Тут знайдено це питання, яке, здається, задає те саме: Послідовність символів Newline у ​​властивості вмісту CSS?

Схоже, ви можете використовувати \Aабо \00000aдомогтисяnewline

<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 дисплея: таблиці . Корисно, якщо ви хочете замінити справжній <br />.

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