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 中增強了裝飾線在顏色、定位、樣式方面的效果並允許屬性值複合使用。

// CSS 2
text-decoration: none | underline | overline | line-through | blink
複製程式碼

// CSS 3
text-decoration：<text-decoration-line> || <text-decoration-style> || <text-decoration-color>
複製程式碼

text-decoration-line

設定文字裝飾線位置

可以多個屬性值同時使用

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

設定文字裝飾線顏色

text-decoration-color：<color>
複製程式碼

text-decoration-style

設定文字裝飾線的形狀

IE 系列不支援，其它瀏覽器都需要加對應的字首

Safari 9 中 dotted 和 dashed 的效果與 solid 一致

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

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

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

設定裝飾線的寬度

目前所有瀏覽器均不支援

text-decoration-width：auto | <length>
複製程式碼

text-underline-offset

設定裝飾線的偏移量

CSS 3 中允許對裝飾線進行定位（text-underline-position），CSS 4 中可以通過該屬性設定裝飾線相對於初始定位的偏移量

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