Create Line Breaks in Data Description

Question

I have CSS that is using Data Description to display text on a page.

Code:

CSS

#nav a:after { 
      text-align:center; 
      content: attr(data-description); 
      display: block;
}

HTML

<li><a data-description="The Thinking Man,The Artist, The Philosopher"  href="#">The Renaissance Man</a></li>

What I am having trouble with and would I would like to do is to have each part of the sentence on its on line. In other words

The Thinking Man
The Artist
The Philosopher

But when I insert a <br /> it doesn't creat a break it just displays <br /> in the code. How would I create line breaks in a data description using the following code?

@Vucko - That doesn't work because 1) it throws off the centering of the description underneath the main text. 2) I am still left with `the` on one line when it should be the next line. Needs to be a break. — L84, May 30 '13 at 20:05

score 6 · Accepted Answer · answered May 30 '13 at 20:08

6

You can add a new line by combining \A with white-space:pre-wrap;, for example:

p:after {
    content:"Line 1\ALine 2";
    white-space:pre-wrap;
}

/* Line 1
 * Line 2 */

JSFiddle example.

Unfortunately it doesn't seem you can do this using attr().

<p data-description="Line 1\ALine 2"></p>

p:after {
    content:attr(data-description);
    white-space:pre-wrap;
}

/* Line 1\ALine 2 */

JSFiddle example.

What you could do to get around this is to use multiple data-* attributes:

<p data-description1="Line 1" data-description2="Line 2"></p>

p:after {
    content:attr(data-description1) "\A" attr(data-description2);
    white-space:pre-wrap;
}

/* Line 1
 * Line 2 */

JSFiddle example.

I don't know if this is a usable solution to your problem, however.

answered May 30 '13 at 20:08

James Donnelly

126,410
34
208
218

Ah yes, look at that. Good answer! – jamesplease May 30 '13 at 20:10
Thanks for the detailed answer. The last solution `
` looks to be the best solution. – L84 May 30 '13 at 20:10
Question: When using ` white-space:pre-wrap;` it works *but* the dropdown now has a ton of space. I cannot get the space to not be there. I tried adding `white-space:normal;` to other CSS but it doesn't work. Thoughts? – L84 May 30 '13 at 20:47
@Lynda you can try `pre` or `pre-line` instead of `pre-wrap`. Unfortunately `\A` relies on the `white-space` property not collapsing white space. http://www.w3.org/TR/CSS21/generate.html – James Donnelly May 30 '13 at 20:51

jamesplease · Answer 2 · 2013-05-30T20:06:54.927

The content attribute won't ever interpret your Html as markup, so you'll need to go about this another way.

One way would be escaping the newline and setting white-space: pre; in your pseudoelement. This value is an abbreviation for 'preserves,' which means the newline will be rendered by the browser.

The Thinking Man,\AThe Artist,\AThe Philosopher

View on JSFiddle

For more on the white-space property, refer to the MDN article on it..

For more on escaping new lines in content, check out the CSS2 specs on strings.

Create Line Breaks in Data Description

2 Answers2