zoukankan      html  css  js  c++  java
  • CSS的属性数据新行字符和伪元素含量值

    是否有可能有一个新的行数据属性? 我想这样做: CSS:

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

    HTML

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

    我发现,“\\ a”是在CSS中的新行,但仍然无法正常工作
    ------------------------------------------------------------------------------------------------------------------------- 
    1. 以下是如何能工作。你需要修改你的数据属性,如下所示:

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

    和CSS(概念验证):

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

    小提琴演示: 如何运作 运用\a不工作,但相同的HTML实体呢,&#xa;。 按照CSS2.1规范,attr(attribute-label)返回一个字符串,但该字符串不是由CSS处理器(我不知道究竟是什么)解析。我推测,\a必须由CSS处理器 CodeGo.net,以便为将要显示属性的代码进行解释。 与此相反,在HTML实体是由浏览器直接解释(我猜的......),所以它似乎工作。 然而,对于换行工作,你需要设置white-space: pre保存在伪注的空白:您也可以考虑pre-wrappre-line这取决于你的内容的性质。 参考 关于获得一个换行的HTML实体代码: 关于attr()值的content属性: 
    2. 你的属性值内一个普通的换行符:

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

    浏览器已经在这方面已经出现bug,HTML规范还没有对这个很清楚,他们换行符的内容(他们正在采取等同于空格),而不是在属性值。在HTML5中的CR,属性值的解析规则说清楚,换行符被简单地添加到属性值。现代浏览器一般由这样的游戏规则。 然而,当通过在CSS中的价值attr(...),换行通常会被视为等同于一个空间,所以你需要设置white-space在伪的值,使得换行符荣幸,prepre-wrappre-line。 P.S.在HTML中,标记\a就只不过是两个数据字,没有的符号&#xa;将表示换行(特别是换行),但它也不过相当于烃源实际的换行符。

  • 相关阅读:
    VS Code的常用备忘
    Echarts圆环,初始化时进度条效果
    nodejs 复制文件到 另一路径下 。可以在npm库看下mv 和 mvdir 有一点区别
    nginx启动报错(1113: No mapping for the Unicode character exists in the target multi-byte code page
    Echarts dataZome 横向移动动态显示数据
    flex布局时,会有兼容性问题,所以能少用flex布局的地方还是要避免下
    python 搭建 flask 和 orator框架开发
    直播 小测试
    对高并发的理解
    MySQL 中文分词原理
  • 原文地址:https://www.cnblogs.com/miid/p/5129845.html
Copyright © 2011-2022 走看看