CSS text-decoration-line 属性
CSS text-decoration-line
CSS text-decoration-line 属性规定添加到文本的一条或多条上装饰线。
语法
text-decoration-line: none|underline|overline|line-through|initial|inherit;
值 | 描述 |
---|---|
none | 默认值。不添加上装饰线。 |
underline | 添加下划线。 |
overline | 添加上划线。 |
line-through | 添加穿越线(删除线)。 |
initial | 将属性设置为其默认值。 查看CSS initial |
inherit | 从父元素继承text-decoration-line属性值。 |
示例
p {
text-decoration-line: underline;
}
h1 {
text-decoration-line: line-through;
}
a {
text-decoration-line: none; /* 取消链接下划线 */
}
多条装饰线
通过使用text-decoration 属性的缩写,可以同时添加多条装饰线。
h1 {
text-decoration: underline overline line-through;
/* 等效于以下3行 */
/* text-decoration-line: underline; */
/* text-decoration-line: overline; */
/* text-decoration-line: line-through; */
}
其他注意事项
继承
text-decoration
属性会被继承。
单词间距离问题
当使用text-decoration-line
添加下划线时,由于下划线的高度往往会压缩文本其下面的线宽会和上下单词的距离相等,会出现单词间距离较大的问题。
解决方法是通过增加下划线与文字的间距。
p {
text-decoration-line: underline;
text-underline-position: under;
text-underline-offset: 3px;
}
结论
text-decoration-line
属性可用于添加一些常用的装饰线(如下划线、上划线、穿越线)到文本中,同时可以与其他属性一起使用,例如调整单词间距、修改线条颜色等。需要注意的是,使用时需要细心,避免出现单词间距离过大的情况。