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 typediscrete
正规顺序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

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

Browser Compatibility

Update compatibility data on GitHub

 DesktopMobile
 ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
text-decoration-skip

Experimental

No support57 — 64

Notes

打开
No supportNoNo supportNoNo supportNoNo support44 — 50

Notes

打开
Full support12.1

Notes

打开
No support57 — 64

Notes

打开
No support57 — 64

Notes

打开
No supportNoNo support43 — 46

Notes

打开
Full support12.2

Notes

打开
Full support7.0

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值