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

Question

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

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

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

в Примере элемент HTML break line-это только для визуализации что я хотел бы достижение:

#headerAgentInfoDetailsPhone::after

{

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

}

421 8

css

8 ответов:

Comments

Ничего не найдено.

Adrift · Accepted Answer · 2013-06-11 19:57:12

The content собственность государства:

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

Так что вы можете использование:
#headerAgentInfoDetailsPhone:after {
  content:"Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}
http://jsfiddle.net/XkNxs/

underscore · Accepted Answer · 2018-09-03 15:18:45

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

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

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

Sachin · Accepted Answer · 2013-06-11 20:00:41

вы можете попробовать этот
#headerAgentInfoDetailsPhone
{
    white-space:pre
}
#headerAgentInfoDetailsPhone:after {
    content:"Office: XXXXX \A Mobile: YYYYY ";
}
В JS Скрипку

Cédric NICOLAS · Accepted Answer · 2016-01-21 02:12:56

Я должен был иметь новые строки в подсказке. Мне пришлось добавить этот CSS на мой :after:
.tooltip:after {
  width: 500px;
  white-space: pre;
  word-wrap: break-word;
}
перенос слов кажется необходимым.

кроме того, \A не работал в середине текста для отображения, чтобы заставить новую строку.
 &#13;&#10; 
работали. Тогда я смог получить такую подсказку:

Szymon Dziewoński · Accepted Answer · 2018-07-03 12:27:58

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

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> 
надеюсь, что это сэкономить чье-то время, удачи:)

Dryden Long · Accepted Answer · 2017-05-23 14:47:18

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

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

Marko36 · Accepted Answer · 2018-07-10 22:22:13

<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 дисплей:таблица. Полезно, если вы хотите заменить real.

проверьте этот демо-код:https://codepen.io/Marko36/pen/RBweYY,
и этот пост на отзывчивом сайте используйте:отзывчивые разрывы строк: имитация
в заданных точках останова.

Ashar Zafar · Accepted Answer · 2018-06-17 15:53:56

добавить разрыв строки ::after или ::перед псевдо-элемент содержания
.yourclass:brfore{
    content: 'text here first \A  text here second';
    white-space: pre;
}