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

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

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

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

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

источник

2013-06-11 elkdee

CSS не для добавления или редактирования содержимого, то для управления тем, как содержание отображается – underscore

@SamithaHewawasam Хотя я согласен с вашим утверждением, это выглядит как плакате оказались в ситуации, когда они не могут редактировать HTML. Для небольших простых дополнений к содержимому я могу понять, почему это было бы полезно/необходимо. –

Возможный дубликат [Последовательность символов Newline в свойстве содержимого CSS?] (Http://stackoverflow.com/questions/9062988/newline-character-sequence-in-css-content-property) – cimmanon

175

В content собственности государства:

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

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

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

http://jsfiddle.net/XkNxs/

источник

2013-06-11 15:21:04 Adrift

+11

На мгновение я подумал «почему' \ A', а не '\ n'» - тогда я вспомнил, что новая строка - '0x0A' :) –

Я пробовал это с помощью запроса на печать, он не работает. это ошибка или это поведение по умолчанию? Без печатных носителей он работает. – harryfeng

Спасибо, что упомянул 'pre-wrap'! У меня возникли проблемы с '# headerAgentInfoDetailsPhone' **, которые больше не обертываются в веб-браузерах Blink, таких как Chrome. ** Firefox не восприимчив к свойству' white-space: pre; ', возвращающемуся к элементу. –

нашел этот вопрос здесь, что, кажется, спросить то же самое: Newline character sequence in CSS 'content' property?

Выглядит как вы можете использовать \A или \00000a для достижения newline

источник

2013-06-11 15:19:49

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

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

Js Fiddle

источник

2013-06-11 15:20:20 Sachin

Работал отлично! Большое спасибо ... Я могу поставить эту задачу на отдых сейчас! – elkdee

Хорошая статья explane то, что вы хотите

Adding a line break between two inline elements

Если вам нужно иметь два встроенных элементов, где один врывается следующая строка внутри другого элемента, вы можете выполнить это b у добавление псевдо-элемент: после того, как с содержанием: '\ А' и бело-пространстве: предварительно

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-11 15:36:17 underscore

Я должен иметь новые строки в подсказке , Мне пришлось добавить этот CSS на мой: после:

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

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

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

&#13;&#10;

работал.Я был тогда в состоянии получить такую подсказку:

источник

2016-01-21 00:07:47

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

ответ

Смежные вопросы