View in EnglishAlways switch to English

text-decoration-line

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2020年1月.

* Some parts of this feature may have varying levels of support.

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

css

/* 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`
适用元素	所有元素. It also applies to`::first-letter` and`::first-line`.
是否是继承属性	否
计算值	as specified
动画类型	离散值

语法

值

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

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

形式语法

text-decoration-line =
none|
[underline||overline||line-through||blink]|
spelling-error|
grammar-error

示例

html

<p>Here's some text with wavy red underline!</p><p>This text has lines both above and below it.</p>

css

.wavy {  text-decoration-line: underline;  text-decoration-style: wavy;  text-decoration-color: red;}.both {  text-decoration-line: underline overline;}