美文网首页
《CSS 揭秘》- 字体排印 - 第五章

《CSS 揭秘》- 字体排印 - 第五章

作者: noyanse | 来源:发表于2018-04-23 11:34 被阅读0次

    连字符断行

    CSS 文本(第三版)引入了一个新的属性 hyphens 。它接受三个值:none 、 manual 和 auto 。 manual 是它的初始值,其行为正好对应了现有的工作方式:我们可以在任何时候手工插入软连字符,来实现断词折行的效果。很显然 hyphens: none; 会禁用这种行为;而最为神奇的是,只需这短短一行 CSS 就可以产生我们梦寐以求的效果:http://dabblet.com/gist/e370ba333ae95116e212

    插入换行

    http://dabblet.com/gist/06517b7bb042283ee5fd105444f752b6

    文本行的斑马条纹

    如果是表格tr可以用

    tr:nth-child(even) {
      background: rgba(0,0,0,.2);
    }
    

    但如果是文本的话,可以用linear-gradient,background-origin: content-box;
    http://dabblet.com/gist/cf30f5d442533b32600d

    调整 tab 的宽度

    包含大量代码的网页(比如文档或教程)在样式上面对着无法回避的挑战。我们通常使用 <pre> 和 <code> 元素来显示代码,它们具有浏览器所赋予的默认样式。即使 tab 非常适合用来缩进代码 ,但人们在网页中却常常有意避开tab。这是因为浏览器会把其宽度显示为 8 个字符!
    http://dabblet.com/gist/88c1523dfd1284950b4d

    相关文章

      网友评论

          本文标题:《CSS 揭秘》- 字体排印 - 第五章

          本文链接:https://www.haomeiwen.com/subject/yyuklftx.html