CSS data attribute new line character & pseudo-element content value

Question

Is it possible to have a new line in a data attribute ?

I am trying to do something like this:

CSS:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

HTML

<div data-foo="First line \a Second Line">foo</div>

I found that "\a" is a new line in CSS, but still does not work for me.

Solution 1

Here is how this can work. You need to modify your data attribute as follows:

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

<div data-foo='First line &#xa; Second Line'>foo</div>

Fiddle Demo: http://jsfiddle.net/audetwebdesign/cp4RF/

How It Works

Using \a does not work, but the equivalent HTML entity does, 
.

According to the CSS2.1 spec, attr(attribute-label) returns a string but the string is not parsed by the CSS processor (I am not sure what this means exactly). I speculate that \a must be interpreted by the CSS processor in order for the code to be displayed property.

In contrast, the HTML entity is interpreted by the browser directly (I guess...) so it appears to work.

However, for the line feed to work, you need to set white-space: pre to preserve the white space in the pseudo-element. Note: you may also consider namely pre-wrap, or pre-line depending on the nature of your content.

Reference

Regarding getting the HTML entity code for a linefeed:
http://www.fileformat.info/info/unicode/char/000a/index.htm

Regarding the attr() value for the content property:
http://www.w3.org/TR/CSS2/generate.html#content

Solution 2

You can use a plain line break inside an attribute value:

<div data-foo="First line
Second Line">foo</div>

Browsers have been buggy in this respect, and the HTML specifications have not been quite clear on this; they discuss the meaning of line breaks in element content (where they are taking as equivalent to spaces), but not in attribute values. In HTML5 CR, the parsing rules for attribute values make it clear that line breaks are simply added to the attribute value. Modern browsers generally play by such rules.

However, when you use the value in CSS via attr(...), the line break will normally be treated as equivalent to a space, so you need to set white-space on the pseudo-element to a value that makes line breaks honored, namely pre, pre-wrap, or pre-line.

P.S. In HTML, the notation \a is just two data characters, with no special meaning. The notation 
 would denote a line break (specifically, LINE FEED), but it would be just equivalent to an actual line break in souce.

Solution 3

To add a new line in Tooltips

<tr>
<td>RFC</td>
<td>
<span class="rcftip" tabindex="0" data-descr="AD001: Non Aadhar XML 
journey &#13;&#10;BU001: DPDs in Bureau, Low score and related issues         
&#13;&#10;BU002: Presence of default qualifiers &#13;&#10;INC001: Low 
reported Income &#13;&#10;INC002: Low Income as per SMS &#13;&#10;INC003: 
Low Income as per Bank Statement &#13;&#10;EL001: Eligibility less than 
defined &#13;&#10;M001: Name match failed in KYC &#13;&#10;M002: Name 
match failed in Telco &#13;&#10;M003: Name Match failed in Address proof 
&#13;&#10;M004: Face match failed &#13;&#10;M005: Distance match failed 
&#13;&#10;M006: No Local address found">
<span th:if="${user.rfc != null}" th:text="${user.rfc}"></span>
</span>
</td>
</tr>

In CSS

span[data-descr] {
position: relative;
text-decoration: underline;
color: #00F;
cursor: help;
}

span[data-descr]:hover::after,
span[data-descr]:focus::after {
content: attr(data-descr);
position: absolute;
left: 0;
top: 24px;
min-width: 200px;
border: 1px #aaaaaa solid;
border-radius: 10px;
background-color: #ffffcc;
padding: 12px;
color: #000000;
font-size: 14px;
z-index: 1;
}

.rcftip:after {
content: '\A';
white-space: pre;
word-wrap: break-word;
}

Result: tooltips with new line

Comments

[SYNCRo]

Any idea why using jQuery $("[data-foo]").attr("data-foo", "First line 
 Second Line") is not working? It just displays "First line 
 Second Line".

[norbidrak]

Same problem as @SYNCRo had, it's not working, if it's assigned from js variable to attribute.