文本装饰（text-decoration）

1.基础语法

接下来，我们讨论 text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

text-decoration 有 5 个值：none | underline | overline | line-through | blink。

不出所料，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。

none 值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果你希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点，代码示例

小白教程网www.2d5.net

a {text-decoration: none;}

注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。

2.小程序应用

根据基础的语法，下面在微信小程序中实现如何定义文本的顶端线条、底部线条、中间贯穿线。

说明：text是行内元素，所以这里都是在一行；如果想每个text一行，需要在每个text外面加上view，view是块级元素，每个view自成一行。

.wxml文件代码示例

小白教程网www.2d5.net

<view>
  <text>顶端线条</text>
  <text>底部线条</text>
  <text>中间贯穿线</text>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

view{
  margin-top: 10px;/*距离顶部的外边距*/
}
/*文本装饰*/
.cls1{
 text-decoration: overline;/*上划线*/
}
.cls2{
 text-decoration: underline;/*下划线*/
}
.cls3{
 text-decoration: line-through;/*中间画一个贯穿线*/
}

效果如图3-9所示。