CSS text-decoration-line 属性

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

实例

设置不同的 text-decoration 线条类型：

<!DOCTYPE html>
<html>
<head>
<style>
div.a {
   -webkit-text-decoration-line: overline; /* Safari */
   text-decoration-line: overline;
}
div.b {
   -webkit-text-decoration-line: underline; /* Safari */
   text-decoration-line: underline;
}
div.c {
   -webkit-text-decoration-line: line-through; /* Safari */
   text-decoration-line: line-through;
}
div.d {
   -webkit-text-decoration-line: overline underline; /* Safari */
   text-decoration-line: overline underline;
}
</style>
</head>
<body>
<h2>text-decoration-line 属性</h2>
<div class="a">这是顶部有一条线的文本。</div>
<br>
<div class="b">这是带有下划线的文本</div>
<br>
<div class="c">这是一条线贯穿文本。</div>
<br>
<div class="d">这是顶部有一条线，同时又带有下划线的文本。</div>
<p><b>注释：</b>版本 79 之前的 Edge 不支持 text-decoration-line 属性，Safari 只支持 -webkit- 前缀。</p>
</body>
</html>

运行一下

定义和用法

text-decoration-line 属性设置要使用哪种文本装饰的类型（下划线、上划线、穿线）。

提示：同时请参阅 text-decoration 属性，它是 text-decoration-line、text-decoration-style 以及 text-decoration-color 的简写属性。

注释：您还可以组合多个值，比如 underline 和 overline，在文本上下方同时显示线条。

默认值：	none
继承：	否
动画制作：	不支持。请参阅：动画相关属性。
版本：	CSS3
JavaScript 语法：	object.style.textDecorationLine="overline"

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

带 -webkit- 或 -moz- 的数字表示使用前缀的首个版本。

属性
text-decoration-line	57.0	79.0	36.06.0 -moz-	7.1 -webkit-	44.0

CSS 语法

text-decoration-line: none|underline|overline|line-through|initial|inherit;

属性值

值	描述
none	默认值。规定 text-decoration 没有线条。
underline	规定在文本下方显示线条。
overline	规定在文本上方显示线条。
line-through	规定显示横穿文本的线条。
initial	将此属性设置为其默认值。参阅 initial。
inherit	从其父元素继承此属性。参阅 inherit。

CSS text-decoration-line 属性

实例

定义和用法

浏览器支持

CSS 语法

属性值

相关页面

分类导航