Как я могу вставить линии разрыва в текст «Что-то сломать» в несколько строк?

Question

Вы видите, что я пытался поставить

<div class="periodic-element intense-work" data-description="Something<div>To</div></br>Break">
</div>

Но не вышло.

Здесь полный код на Fiddle

Спасибо за помощь!

Answer 1

Я нашел более простой способ сделать это:

Добавляю; От white-space:pre-wrap; до .periodic-element:after

, тогда я использовал 
 в своем тексте.

https://jsfiddle.net/2jy8pnLg/

Или просто нажав ENTER для создания новых строк тоже работало.

https://jsfiddle.net/2jy8pnLg/1/

Answer 2

Вы можете сделать это с помощью Javascript, как упоминалось в @rguttersohn, но чтобы сделать это в рамках вашей текущей структуры CSS, вам необходимо изменить свойство content в вашем селекторе .periodic-element:after и внести изменения в ваш элемент html.

<div class="periodic-element intense-work" data-description="Something" data-description-2="To" data-description-3="Break">

Обратите внимание на добавление data-description-2 и data-description-3. В CSS вам нужно будет добавить

content: attr(data-description) "\A" attr(data-description-2) "\A" attr(data-description-3);

AND

white-space: pre-wrap;

Это объединит различные описания данных атрибуты в так много строк. См. Обновленный JSFiddle .