在数据描述中创建换行符[重复]

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

content 属性永远不会将您的 Html 解释为标记，因此您需要另辟蹊径。

一种方法是转义换行符并在伪元素中设置white-space: pre;。该值是“preserves”的缩写，表示换行符将由浏览器呈现。

The Thinking Man,\AThe Artist,\AThe Philosopher

View on JSFiddle

有关 white-space 属性的更多信息，refer to the MDN article on it.。

有关在content 中转义新行的更多信息，请查看CSS2 specs on strings。

Answer 2

您可以通过将\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.

不过，我不知道这是否可以解决您的问题。