text-decoration 回顾

text-decoration

今天刷 Twitter 时看到 CSS Working Group 发了条推特

CSS Text Decoration Level 4: First Public Working Draft

大概看了下草案,发现自己对 text-decoration 这个属性已经有点陌生了(捂脸..),于是乎只好重新回顾总结下。

CSS 3

CSS 1 和 CSS 2 只支持定义基本的 text-decoration。CSS 3 中增强了装饰线在颜色、定位、样式方面的效果并允许属性值复合使用。

1
2
// CSS 2
text-decoration: none | underline | overline | line-through | blink
1
2
// CSS 3
text-decoration:<text-decoration-line> || <text-decoration-style> || <text-decoration-color>

text-decoration-line

设置文本装饰线位置

可以多个属性值同时使用

1
text-decoration-line:none | [underline || overline || line - through || blink]

Demo

1
2
3
4
5
// .scss
p {
text-decoration: blue line-through;
text-decoration-line: underline overline;
}
属性值 说明 备注
none 文字无装饰 默认值
underline 用下划线装饰文字
overline 用上划线装饰文字
line-through 用贯穿线装饰文字
blink 文字的装饰效果为闪烁效果 由于规范允许用户代理忽略该效果,因而大部分浏览器不支持闪烁效果

text-decoration-color

设置文本装饰线颜色

1
text-decoration-color:<color>

text-decoration-style

设置文本装饰线的形状

IE 系列不支持,其它浏览器都需要加对应的前缀

Safari 9 中 dotteddashed 的效果与 solid 一致

1
text-decoration-style:solid | double | dotted | dashed | wavy

Demo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.solid {
-webkit-text-decoration-style: solid;
-moz-text-decoration-style: solid;
text-decoration-style: solid;
}
.double {
-webkit-text-decoration-style: double;
-moz-text-decoration-style: double;
text-decoration-style: double;
}
.dotted {
-webkit-text-decoration-style: dotted;
-moz-text-decoration-style: dotted;
text-decoration-style: dotted;
}
.dashed {
-webkit-text-decoration-style: dashed;
-moz-text-decoration-style: dashed;
text-decoration-style: dashed;
}
.wavy {
-webkit-text-decoration-style: wavy;
-moz-text-decoration-style: wavy;
text-decoration-style: wavy;
}
属性值 说明 备注
solid 实线 默认值
double 双实线
dotted 点线
dashed 短线
wavy 波浪线

text-decoration-skip

指明文本装饰线需要略过哪些区域

目前除 Safari 浏览器外,其它浏览器都不支持该属性;另外,Safari 也只是支持 inkobjects 属性值,但未实现对应的效果

Demo

1
text-decoration-skip:none | [objects || spaces || ink || edges || box-decoration]
属性值 说明 备注
none 不略过 默认值
objects 略过内联元素(inline-block),如:图片等
spaces 略过空白,包括:常规空白(U+0020)、制表符(U+0009)以及不间断空格(U+00A0)、表意空格(U+3000)、所有固定宽度空格(U+2000至U+200A、U+202F和U+205F)、以及相邻的字母间隔(letter-spacing)或单词间隔(word-spacing
ink 略过字符绘制处,在文本连笔处中断绘制
edges 装饰线起始于内容起始边缘后面,结束于内容结束边缘的前面。这个属性值的目的是为了让两个下划线元素看上去公用一条下划线。
box-decoration 略过盒子的 margin、border、padding 区域。需要注意的是,这是针对祖先的装饰效果,并不会绘制自身的装饰。

text-underline-position

设置文本装饰下划线的定位

目前只有 Safari 7+ 和 Chrome 65 支持该属性且仅支持 under 属性值;Safari 支持 under 属性值但无效果

Demo

1
text-underline-position:auto | [under || [left | right]]
属性值 说明 备注
auto 使用算法来决定装饰线的定位,但必须在字母的基准线上或者再基准线以下
under 装饰线定位在内容盒子下边缘
left 装饰线定位在内容盒子左边缘
right 装饰线定位在内容盒子右边缘

CSS 4 草案

CSS 4 中又准备增强装饰线的效果,这次允许设置装饰线的宽度(text-decoration-width)以及定位偏移量(text-underline-offset),并对 text-decoration-skip 进行了补充。

text-decoration-width

设置装饰线的宽度

目前所有浏览器均不支持

1
text-decoration-width:auto | <length>

text-underline-offset

设置装饰线的偏移量

CSS 3 中允许对装饰线进行定位(text-underline-position),CSS 4 中可以通过该属性设置装饰线相对于初始定位的偏移量

1
text-underline-offset:auto | <length>
text-underline-position 属性值 初始定位 偏移方向
auto 字母基准线 向上
under 内容盒子下边缘 向上
over 内容盒子上边缘 向下

text-decoration-skip

除了 CSS 3 原有的 6 个属性值外,新增了两个属性值 leading-spacestrailing-spaces

属性值 说明 备注
leading-spaces 略过行首的空白符
trailing-spaces 略过行尾的空白符

text-decoration-skip-ink

这个属性其实相当于 text-decoration-skip: ink,用于控制上划线(overline)和下划线(underline)在碰到连笔字符时是否应该打断装饰线

默认值为 auto,表示碰到连笔字符时需打断装饰线,还有个值为 none,表示不打断装饰线

该属性只对上划线(overline)和下划线(underline)有效,对中划线(line-through)无效

目前只有 Chrome 64 实现了该效果

Demo

参考