在数据描述中创建换行符

Question

我有使用数据描述的CSS在页面上显示文本。

代码：

的 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>

我遇到麻烦，我想做的是让句子的每一部分都在线。换句话说

The Thinking Man
The Artist
The Philosopher 

但是当我插入<br />时，它不会创建中断，它只会在代码中显示<br />。如何使用以下代码在数据描述中创建换行符？

Answer 1

您可以通过\A与white-space:pre-wrap;相结合来添加新行，例如：

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

/* Line 1
 * Line 2 */

JSFiddle example

不幸的是，您似乎无法使用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

你可以做的就是使用多个data- *属性：

<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

然而，我不知道这是否是您问题的可用解决方案。

Answer 2

content属性无法将您的Html解释为标记，因此您需要采用另一种方式。

一种方法是转义换行符并在伪元素中设置white-space: pre;。该值是＆＃39;保留的缩写，＆＃39;这意味着换行符将由浏览器呈现。

The Thinking Man,\AThe Artist,\AThe Philosopher

View on JSFiddle

有关白色空间属性的更多信息，请refer to the MDN article on it.。

有关content中转换新行的详情，请查看CSS2 specs on strings。