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.

Bookstack

\a works if you place it directly in the content: "First line \a Second Line"; but seemingly not if you pull it in via attr(). Wow, interesting question! – Lemuroid

I created a demo to test the two solutions: plain newline, and 
 entity. codepen.io/denilsonsa/pen/bgxKgP Summary: both solutions work on all modern browsers (Chrome, Firefox, Safari 9+, IE 11+). – Nathalia

Answer 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

Carbide

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

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

white-space: pre makes \n work for me too. – Gagliano

Answer 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.

Neon

Answer 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

Orthoclase

Rather than just showing code, it's more helpful if the core of the solution is elaborated upon, then demonstrated with a minimal example. – Gagliano

Answer 4

...and if you're trying to figure this out and happen to be using HAML and AngularJS then use \n.

%a.tooltip{:"data-tip" => "Cost Per Unit: {{humanized_cost}} \n(Calculated for applicable Feature Qty.) "}

results in:

Cost Per Unit: $10.54
(Calculated for applicable Feature Qty.)

Marianamariand

Answer 5

Okay, Here is one easy way to do this. you should write it as

data-foo='First line </br> Second Line'

and instead of using .text(), you can use .html(). when you use .html() then it will take as line break and this should solve your problem.

Truffle

</br> is not valid HTML, much less when put into an attribute value. – Gagliano