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 属性同时变成了定义多个相关属性的简写形式。

浏览器兼容性

 

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support Yes ?

36

6 — 39 -moz-

No Yes Yes -webkit-
blink571 ?261 No44 ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support Yes Yes ?

36

6 — 39 -moz-

Yes8 -webkit- Yes
blink571571 ?26144 ?7.0

1. The blink value does not have any effect.

 

另请参阅

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

文档标签和贡献者

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