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

// .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 中 dotted 和 dashed 的效果与 solid 一致

1	text-decoration-style：solid \| double \| dotted \| dashed \| wavy

Demo

.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 也只是支持 ink 和 objects 属性值，但未实现对应的效果

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-spaces、trailing-spaces

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

text-decoration-skip-ink

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

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

该属性只对上划线（overline）和下划线（underline）有效，对中划线（line-through）无效

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

Demo

参考

Chromestatus