如何使用CSS换行显示多行数据属性内容？

使用换行符操作数据属性和伪元素内容

在 CSS 中，可以使用 attr() 函数从数据属性中检索值并将其显示为使用伪元素的内容。但是，在这些数据属性中合并新行可能具有挑战性。

问题：数据属性中的新行字符

考虑以下代码示例：

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

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

尽管使用了在 CSS 中表示换行符的“a”转义序列，但 data-foo 属性中的内容仍保留在一行上。

解决方案：增强的数据属性语法和空白配置

要启用多行数据属性，请修改语法如下：

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

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

在此修改版本中：

• white-space: pre; : 保留数据属性中的空白字符，包括换行符。
• display: inline-block;: 防止文本换行并允许内容在多行上流动。
• ;: 换行符的 HTML 实体。

以上是如何使用CSS换行显示多行数据属性内容？的详细内容。更多信息请关注PHP中文网其他相关文章！