CSS 属性 text-decoration-line 用于设置元素中的文本的修饰类型。当要设置多个线修饰属性时,用 text-decoration 简写属性会比分别写多个属性更方便。

/* Keyword values */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: underline overline;               /* Two decoration lines */
text-decoration-line: overline underline line-through;  /* Multiple decoration lines */

/* Global values */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: unset;

初始值none
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性
适用媒体visual
计算值as specified
Animation typediscrete
正规顺序order of appearance in the formal grammar of the values

语法

text-decoration-line 属性可以设置为 none, 或者一个及多个用空格分隔的下列值。

none
表示没有文本修饰效果。
underline
在文本的下方有一条修饰线。
overline
在文本的上方有一条修饰线。
line-through
有一条贯穿文本中间的修饰线。
blink
文本闪烁(文本交替处于显示与隐藏状态)。客户代理都一致没有实现文本闪烁效果。考虑到为了支持使用 CSS 动画,该值也不宜使用

格式化语法

none | [ underline || overline || line-through || blink ]

示例

<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">This text has lines both above and below it.</p>
.wavy { 
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
}

.both {
  text-decoration-line: underline overline;
}

规范

规范 状态 备注
CSS Text Decoration Module Level 3
text-decoration-line
Candidate Recommendation

初次定义。text-decoration 属性同时变成了定义多个相关属性的简写形式。

浏览器兼容性

 

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support YesEdge ? Firefox Full support 36
Full support 36
No support 6 — 39
Prefixed
Prefixed Requires the vendor prefix: -moz-
IE No support NoOpera Full support YesSafari Full support Yes
Prefixed
Full support Yes
Prefixed
Prefixed Requires the vendor prefix: -webkit-
WebView Android Full support YesChrome Android Full support YesEdge Mobile ? Firefox Android Full support 36
Full support 36
No support 6 — 39
Prefixed
Prefixed Requires the vendor prefix: -moz-
Opera Android Full support YesSafari iOS Full support 8
Prefixed
Full support 8
Prefixed
Prefixed Requires the vendor prefix: -webkit-
Samsung Internet Android Full support Yes
blink
Deprecated
Chrome Full support 57
Notes
Full support 57
Notes
Notes The blink value does not have any effect.
Edge ? Firefox Full support 26
Notes
Full support 26
Notes
Notes The blink value does not have any effect.
IE No support NoOpera Full support 44Safari ? WebView Android Full support 57
Notes
Full support 57
Notes
Notes The blink value does not have any effect.
Chrome Android Full support 57
Notes
Full support 57
Notes
Notes The blink value does not have any effect.
Edge Mobile ? Firefox Android Full support 26
Notes
Full support 26
Notes
Notes The blink value does not have any effect.
Opera Android Full support 44Safari iOS ? Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

 

另请参阅

  • 当要设置多个线修饰属性时,用 text-decoration 简写属性会比分别写多个属性更方便。

文档标签和贡献者

此页面的贡献者: comehope
最后编辑者: comehope,