css - 在数据描述中创建换行符

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

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

score 4 · Accepted Answer

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

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

/* Line 1
 * Line 2 */

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

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

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

/* Line 1\ALine 2 */

你可以做些什么来解决这个问题是使用多个 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 */

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

score 1 · Accepted Answer

该content属性永远不会将您的 Html 解释为标记，因此您需要以另一种方式进行处理。

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

The Thinking Man,\AThe Artist,\AThe Philosopher

有关 white-space 属性的更多信息，请参阅有关它的 MDN 文章。.

有关转义新行的更多信息content，请查看有关字符串的 CSS2 规范。

2 回答 2