• 首页
  • vue
  • TypeScript
  • JavaScript
  • scss
  • css3
  • html5
  • php
  • MySQL
  • redis
  • jQuery
  • text-decoration-skip

    版本:CSS3

    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;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    仅仅safari浏览器支持text-decoration-skip,其余浏览器都不支持text-decoration-skip

    语法:

    text-decoration-skip:none | objects | spaces | leading-spaces | trailing-spaces | edges | box-decoration

    取值:

    • none:没有任何内容被跳过。因此,文本修饰会为所有文本内容和行内元素进行绘制。
    • objects:拥有完整盒模型的原子行内元素会被跳过,例如图片和行内块元素。
    • spaces:所有的空格会被跳过,包括:所有的 Unicode 空白字符和所有的分词符,以及任意相邻的 letter-spacing 或 word-spacing。
    • leading-spaces:除了只跳过开始的空格外,与 spaces 相同。
    • trailing-spaces:除了只跳过结尾的空格外,与 spaces 相同。
    • edges:文本修饰的开始与结束会比原有的装饰范围向内收缩(例如半个线宽)。这样,相邻的元素的下划线就可以分开。(这对于中文很重要,因为在中文中,下划线也是一种形式的标点符号。)
    • box-decoration:文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰;修饰的盒不会渲染本身的盒修饰。

    说明:

    检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。

    对应的脚本特性为textDecorationSkip

    默认值objects
    适用于所有元素
    继承性
    动画性
    计算值指定值
    <!DOCTYPE html>
    <html lang="zh-cmn-hans">
    <head>
    <meta charset="utf-8"/>
    <style>
    
    p {
      margin: 0;
      font-size: 3em;
      text-decoration: underline;
      text-decoration-skip: edges;
    }
    </style>
    </head>
    <body>
    	<p><span>Hey,</span> <span>grab a cup of coffee!</span></p>
    </body>
    </html>
    

    Hey,grab a cup of coffee!