首页 > web前端 > css教程 > 如何使用 CSS 中的数据属性向伪元素内容添加换行符?

如何使用 CSS 中的数据属性向伪元素内容添加换行符?

Susan Sarandon
发布: 2024-11-12 04:34:02
原创
310 人浏览过

How can I add line breaks to pseudo-element content using data attributes in CSS?

将换行符分配给 CSS 和伪元素内容中的数据属性

此查询探讨了将换行符合并到 CSS 中的可能性数据属性。用户的目标是使用伪元素的 content 属性和从 data 属性中提取的值来显示多行内容。

实现

初始方法,使用“a”作为数据属性中的换行符,被证明是不成功的。为了达到预期的结果,需要进行以下修改:

数据属性修改:

  • 将“a”替换为“ "; 该 HTML 实体对应于换行符。

CSS 修改:

  • content: attr(data-foo) ;: 保持显示数据属性内容的原始功能。
  • background-color: black; white-space: pre; display: inline-block;: 确保内容保留其格式并显示为离散块。

最终代码:

CSS:

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

HTML:

<div data-foo='First line &amp;#xa; Second Line'>foo</div>
登录后复制

此修改允许伪元素显示多行内容,保留 data 属性中定义的换行符。

以上是如何使用 CSS 中的数据属性向伪元素内容添加换行符?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板