zoukankan      html  css  js  c++  java
  • css-text-decoration-skip

    text-decoration-skip

    1. Web 开发技术
    2. CSS(层叠样式表)
    3. text-decoration-skip

    中文 (简体)▼

    在此页面

    CSS text-decoration-skip 属性定义了元素哪些部分的内容需要被文本修饰所跳过。

    它可以控制所有该元素或该元素的祖先所绘制的文本修饰线。

    /* 关键字 */
    text-decoration-skip: none;
    text-decoration-skip: objects;
    text-decoration-skip: spaces;
    text-decoration-skip: edges;
    text-decoration-skip: box-decoration;
    
    /* 使用多个关键字 */
    text-decoration-skip: objects spaces;
    text-decoration-skip: leading-spaces trailing-spaces;
    text-decoration-skip: objects edges box-decoration;
    
    /* 全局值 */
    text-decoration-skip: inherit;
    text-decoration-skip: initial;
    text-decoration-skip: unset;
    

    注意: ink 值被移动至 text-decoration-skip-ink 属性。

    初始值 objects
    适用元素 all elements
    是否是继承属性 yes
    适用媒体 visual
    计算值 as specified
    Animation type discrete
    正规顺序 order of appearance in the formal grammar of the values

    语法

    取值

    none

    没有任何内容被跳过。因此,文本修饰会为所有文本内容和行内元素进行绘制。

    objects

    拥有完整盒模型的原子行内元素会被跳过,例如图片和行内块元素。

    spaces

    所有的空格会被跳过,包括:所有的 Unicode 空白字符 和所有的分词符,以及任意相邻的 letter-spacing 或 word-spacing

    leading-spaces

    除了只跳过开始的空格外,与 spaces 相同。

    trailing-spaces

    除了只跳过结尾的空格外,与 spaces 相同。

    edges

    文本修饰的开始与结束会比原有的装饰范围向内收缩(例如半个线宽)。这样,相邻的元素的下划线就可以分开。(这对于中文很重要,因为在中文中,下划线也是一种形式的标点符号。)

    box-decoration

    文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰;修饰的盒不会渲染本身的盒修饰。

    语法格式

    none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

    示例

    HTML

    <p><em>Hey,</em> <em>grab a cup of coffee!</em></p>

    CSS

    p {
      margin: 0;
      font-size: 3em;
      text-decoration: underline;
      text-decoration-skip: edges;
    }

    结果

    Specifications

    Specification Status Comment
    CSS Text Decoration Module Level 4
    text-decoration-skip
    Working Draft 首次定义

    Browser Compatibility

    Update compatibility data on GitHub

      Desktop Mobile
      Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
    text-decoration-skip

    Experimental

    No support57 — 64

    Notes

    打开
    No supportNo No supportNo No supportNo No support44 — 50

    Notes

    打开
    Full support12.1

    Notes

    打开
    No support57 — 64

    Notes

    打开
    No support57 — 64

    Notes

    打开
    No supportNo No support43 — 46

    Notes

    打开
    Full support12.2

    Notes

    打开
    Full support7.0

     

  • 相关阅读:
    中国大学MOOC-数据结构基础习题集、07-2、Insert or Merge
    NSDate相关
    切换中文键盘时覆盖输入框的完美解决方案
    自定义UITableView的右侧索引
    调用系统的短信和发送邮件功能,实现短信分享邮件分享
    程序出现警告,解决方式
    键盘隐藏问题
    java修饰符
    java覆盖和隐藏
    java嵌套类
  • 原文地址:https://www.cnblogs.com/grj001/p/12223034.html
Copyright © 2011-2022 走看看