CSS 中的数据属性可以包含换行符吗？

处理 CSS 数据属性和伪元素内容中的换行符

问题：

CSS 中的数据属性可以包含换行符吗？具体来说，以下CSS和HTML组合可以实现这一点：

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
}

<div data-foo="First line \a Second Line">foo</div>

答案：

CSS数据属性中确实可以有一个新行。但是，提供的示例并未演示正确的语法。要达到预期的效果，您可以按照以下步骤操作：

1.修改您的数据属性：

<div data-foo="First line &amp;#xa; Second Line">foo</div>

在此更新的 HTML 中，新行字符 (a) 替换为 HTML 实体 。该实体表示换行 (LF) 字符，它将在内容中创建新行。

2.调整您的 CSS：

[data-foo]:after {
    content: attr(data-foo);
    background-color: black;
    color: white;
    white-space: pre;
    display: inline-block;
}

在 CSS 中，添加以下属性：

• white-space: pre; 保留空格内容，包括新行。
• display: inline-block;防止内容破坏周围文本的流动。

此修改后的 CSS 可确保数据属性的内容（包括新行）按预期显示。

以上是CSS 中的数据属性可以包含换行符吗？的详细内容。更多信息请关注PHP中文网其他相关文章！