Newlines from attribute text in pseudo element's content

问题: With content: attr(attribute-name) it is possible to add a pseudo element (:before or :after) with text content from an element's attribute. Besides that the content proper...

问题:

With content: attr(attribute-name) it is possible to add a pseudo element (:before or :after) with text content from an element's attribute. Besides that the content property of the pseudo element does allow new lines via the A character within the content of the pseudo element, too:

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

What I now want is to be able to control the position and existence of newline characters within the value of a single attribute containing a multi line text. The text is defined by the user and thus out of my control.

Element:

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

CSS:

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

Sadly this does not work: The a is printed out as if it is a simple character sequence. I also tried r, n and <br /> out of curiosity.

How can I get the newlines from the attribute interpreted as such without using Javascript?

A fiddle I used to try around: https://jsfiddle.net/dWkdp/3039/


回答1:

When using HTML you need to consider &#10; for a new line instead of A that is used with CSS. You need to also add white-space:pre

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

You can also do this:

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

Check this link for more details: https://dev.w3.org/html5/html-author/charref

  • 发表于 2019-01-04 22:55
  • 阅读 ( 186 )
  • 分类:网络文章

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除