Новые строки из текста атрибута в содержимом псевдоэлемента - PullRequest
Новая
       62

Новые строки из текста атрибута в содержимом псевдоэлемента

0 голосов
/ 01 января 2019

С помощью content: attr(attribute-name) можно добавить псевдоэлемент (:before или :after) с текстовым содержимым из атрибута элемента.Кроме того, свойство content псевдоэлемента допускает новые строки через символ \A в содержимом псевдоэлемента, также: 

content: attr(attribute-name1) '\a' attr(attribute-name2)

Теперь я хочу иметь возможность контролироватьположение и наличие символов новой строки в значении одного атрибута, содержащего многострочный текст.Текст определяется пользователем и, таким образом, вне моего контроля.

Элемент: 

<span data-usertext="Some random text with \a some newlines"/>

CSS: 

span:after {
  content: attr(data-usertext);
  white-space: pre;
}

К сожалению, это не работает: \a распечатывается так, как будто это простая последовательность символов.Я также попробовал \r, \n и <br /> из любопытства.

Как я могу получить переводы строк из атрибута, интерпретируемого как таковой, без использования Javascript?

Скрипка, которую я пробовал: https://jsfiddle.net/dWkdp/3039/

1 Ответ

0 голосов
/ 01 января 2019

При использовании HTML вам нужно учитывать &#10; для новой строки вместо \A, который используется с CSS.Вам также необходимо добавить white-space:pre

span:after {
  content: attr(data-usertext);
  white-space:pre;
}
<span data-usertext="Some random text with &#10; some newlines"></span>

Вы также можете сделать это: 

span:after {
  content: attr(data-usertext);
  white-space:pre;
}
<span data-usertext="Some random text with &NewLine; some newlines"></span>

Проверьте эту ссылку для получения более подробной информации: https://dev.w3.org/html5/html-author/charref

...