在数据描述中创建换行符

Question

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

代码：

CSS

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

超文本标记语言

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

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

The Thinking Man
The Artist
The Philosopher 

但是当我插入 a 时<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 示例。

不幸的是，您似乎无法使用attr().

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

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

/* Line 1\ALine 2 */

JSFiddle 示例。

为了解决这个问题，您可以使用多个 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 示例。

但是，我不知道这是否是解决您问题的可用方法。