如何在CSS中的伪元素内容中添加换行符？

将换行符合并到伪元素内容中

将多行添加到 ::after 或 ::before 伪元素的内容属性中可以增强可读性和格式。然而，仅通过 CSS 执行此操作是一个挑战。

使用“A”转义序列

内容属性文档建议使用“A”转义序列在生成的内容中包含换行符。此插入的换行符遵循 'white-space' 属性。

为了说明其应用，请考虑以下示例：

#headerAgentInfoDetailsPhone:after {
  content: "Office: XXXXX \A Mobile: YYYYY ";
  white-space: pre; /* or pre-wrap */
}

此代码在“Office”之间添加换行符和“移动”文本，将内容格式化为多行。请参阅 http://jsfiddle.net/XkNxs/ 上的现场演示。

注意事项

转义任意字符串时，请使用“0000a”而不是“A”以防止类似数字或十六进制值的后续字符导致不可预测的结果。安全实现此目的的示例函数：

function addTextToStyle(id, text) {
  return `#${id}::after { content: "${text.replace(/"/g, '\"').replace(/\n/g, '\00000a')} }"`;
}

以上是如何在CSS中的伪元素内容中添加换行符？的详细内容。更多信息请关注PHP中文网其他相关文章！