CSS 年鉴 → 属性 → T → text-decoration

text-decoration

Avatar of Sara Cope
Sara Cope 于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度！

text-decoration 属性会向选定的文本添加下划线、上划线、删除线或线条组合。

h3 {
  text-decoration: underline;
}

值

  • none：不绘制任何线条，并删除任何现有的装饰。
  • underline：在其基线处绘制一条 1px 的线条穿过文本。
  • line-through：在其“中间”点处绘制一条 1px 的线条穿过文本。
  • overline：在其“顶部”点正上方绘制一条 1px 的线条穿过文本。
  • inherit：继承父元素的装饰。

blink 值在 W3C 规范中，但已弃用，在任何当前浏览器中均无法使用。当它起作用时，它会使文本看起来“闪烁”，方法是将其在 0% 和 100% 不透明度之间快速切换。

演示

使用说明

您可以将 underline、overline 或 line-through 值组合在以空格分隔的列表中，以添加多条装饰线。

p {
  text-decoration: overline underline line-through;
}

默认情况下，线条继承由其 color 属性设置的文本颜色。您可以在支持 text-decoration-color 属性或三值简写属性的浏览器中更改此设置。

text-decoration 作为简写属性

text-decoration 可以与 text-decoration-style 和 text-decoration-color 组合使用，作为简写属性。

.fancy-underline {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: red;
 
  /* can be shortened to */
  text-decoration: underline wavy red;
}

目前只有 Firefox 支持此未加前缀的属性。Safari 使用 -webkit 前缀支持它。Chrome 也需要 -webkit 前缀并在 Chrome 标志中启用实验性 Web 平台功能。

浏览器支持

所有浏览器都支持 CSS2.1 的“长格式”属性 text-decoration。简写属性以及子属性 text-decoration-color、text-decoration-line 和 text-decoration-style 在 Firefox 中未加前缀即可使用，在 Safari 中使用 -webkit 前缀即可使用。Chrome 也会识别这些值，前提是启用了 -webkit 前缀和实验性 Web 平台标志。

此浏览器支持数据来自 Caniuse，其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。

桌面

ChromeFirefoxIEEdgeSafari
130132否127TP

移动/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712718.0*

更多信息

嘘！ 创建一个DigitalOcean 账户并获得 200 美元的免费信用额度 用于基于云的托管和服务。

评论

  1. robby mahdi
    评论永久链接#

    请告诉我如何禁用仅对**几个文本**的右键单击

    回复
  2. 我的公寓需要家具
    评论永久链接#

    如何更改下划线的样式？
    我的意思是更改下划线的颜色、大小等。
    谢谢..

    回复
  3. Martijn
    评论永久链接# 
    -webkit-text-decoration-style: dotted;

    甚至在Canary 36中也不起作用。-moz- 等效项在 Firefox 中有效。

    那么如何在 Chrome 中应用此属性？

    回复
  4. Rio Brewster
    评论永久链接#

    我感到困惑。文章说这仅在 FF 中受支持，但在下面的表格中却说它在所有主要浏览器中“有效”。你在这里给我虚假的希望吗？

    我的经验是 text-decoration-style 和 text-decoration-color 仅在 FF 中有效，并且仅使用 -moz 前缀。

    我很乐意能够使用它，因为使用 border-bottom 可能很古怪——而且我无法相信这在 CSS2 甚至 CSS3 中都没有得到解决。

    回复
  5. Martijn
    评论永久链接#

    事实证明，在 Chrome（26+，如果我记得没错）中，您需要启用实验功能标志。即使您礼貌地请求，用户也不会这样做。因此，对于大多数目的而言，Chrome 尚未支持此功能。

    它在技术上位于代码库中，Chrome 也可在技术上支持它，但实际上几乎没有人会看到它正常工作。

    回复
  6. Martijn
    评论永久链接#

    Opera、IE、Safari、Android、iOS、Dolphin、UC 浏览器、黑莓、WP8 也是如此。基本上除了（桌面版？）Firefox 之外的所有浏览器都不支持 text-decoration-style。

    回复
    • Chris Krycho
      评论永久链接#

      这种情况似乎正在缓慢改变。Safari 8（在 Yosemite 开发人员预览版中）现在对其提供部分支持：double 和 wavy 选项呈现（后者很丑陋），并且也支持 text-decoration-color 属性。

  7. Deepak Sudera
    评论永久链接#

    Chrome 不支持 text-decoration-style。，…但 Firefox 支持.. 请帮助我在 Chrome 浏览器中解决此问题…

    回复
  8. Brian Pohuski
    评论永久链接#

    通过使用内联表格和表格标题，我们可以强制伪元素的正确定位，从而允许正确缩放。

    a {
  text-decoration: none;
  display: inline-table;
}

a:after {
  content: "";
  width: 100%;
  border-bottom: 0.1em solid #f00;
  display: table-caption;
  vertical-align: baseline;
  position: relative;
  top: 0.9em;
}

    http://codepen.io/pohuski/pen/vEzxPj

    我在StackOverflow上的解释

    回复
  9. dadanini
    评论永久链接#

    文本装饰规范仍在开发中(http://www.w3.org/TR/css-text-decor-3/)。所有这些子属性都是实验性的。如果您需要下划线的其他颜色，请使用额外的 span 元素。

    <span style="color:red; text-decoration: underline"><span style="color: blue; text-decoration: none">Try this!</span></span>
    回复
    • The ChanDroid
      评论永久链接#

      谢谢——还不错——我看到自己正在使用它……

  10. Ahmad
    评论永久链接#

    在 WebKit 中，text-decoration-color 不起作用.. 太可惜了！我一直认为如果某些东西在其他地方有效，它也必须在 WebKit 中有效

    回复
  11. Shyam
    评论永久链接#

    有任何想法如何更改波浪形下划线的粗细吗？

    回复
  12. Mahesh Kumar Soundararajan
    评论永久链接#

    “text-decoration: none”样式属性在 IE 中运行良好，但在受支持的浏览器列表中，IE 和 Edge 被标记为不受支持。这是有什么具体原因吗？

    回复
  13. Vikas
    评论永久链接#

    多么棒的文本装饰；)

    我喜欢 text-decoration: red underline overline wavy;。它看起来真的很棒。

    回复

发表回复

Your email address will not be published. Required fields are marked *

© 2024 . All rights reserved.