1. Web
  2. CSS
  3. text-decoration-line

text-decoration-line

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2020 年 1 月⁩ 起，所有主流瀏覽器均已支援。

* 此特性的某些部分可能存在不同級別的支援。

text-decoration-line CSS 屬性設定元素中文字使用的裝飾型別，例如下劃線或上劃線。

試一試

text-decoration-line: none;

text-decoration-line: underline;

text-decoration-line: overline;

text-decoration-line: line-through;

text-decoration-line: grammar-error;

text-decoration-line: spelling-error;

text-decoration-line: underline overline;

text-decoration-line: underline line-through;

<section id="default-example">
  <p>
    I'd far rather be
    <span class="transition-all" id="example-element">happy than right</span>
    any day.
  </p>
</section>

p {
  font: 1.5em sans-serif;
}

當同時設定多個線條裝飾屬性時，使用 text-decoration 簡寫屬性可能更方便。

語法

css
/* Single keyword */
text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: spelling-error;
text-decoration-line: grammar-error;

/* Multiple keywords */
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: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

text-decoration-line 屬性指定為 none，或來自以下列表的一個或多個空格分隔值。

值

none

不生成任何文字裝飾。

下劃線

每行文字下方都有一條裝飾線。

上劃線

每行文字上方都有一條裝飾線。

刪除線

每行文字中間都有一條裝飾線。

文字閃爍（在可見和不可見之間交替）。符合規範的使用者代理可能不會閃爍文字。此值已棄用，建議使用CSS 動畫。

拼寫錯誤

每行文字都使用使用者代理突出顯示拼寫錯誤的方法，在大多數瀏覽器中，這是一條紅色的虛線。

語法錯誤

每行文字都使用使用者代理突出顯示語法錯誤的方法，在大多數瀏覽器中，這是一條綠色的虛線。

注意：當使用 spelling-error 和 grammar-error 值時，瀏覽器會忽略 text-decoration 簡寫中的其他屬性（例如 text-underline-position、color 或 stroke）。

正式定義

初始值none
應用於所有元素。也適用於 ::first-letter 和 ::first-line。
繼承性否
計算值同指定值
動畫型別離散

正式語法

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

示例

基本示例

html
<p class="wavy">Here's some text with wavy red underline!</p>
<p class="both">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;
}

錯誤示例

在此示例中，第一個段落包含一個拼寫錯誤，並在拼錯的單詞上使用了瀏覽器對拼寫錯誤的樣式。第二個段落使用了瀏覽器對語法錯誤的樣式。在不支援這些 text-decoration-line 值的瀏覽器中，沒有樣式更改。

html
<p>This text contains a <span class="spelling">speling</span> mistake.</p>
<p class="grammar">This text contain grammatical errors.</p>
css
.spelling {
  text-decoration-line: spelling-error;
}

.grammar {
  text-decoration-line: grammar-error;
}

規範

規範
CSS 文字裝飾模組級別 3
# text-decoration-line 屬性

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

本頁面最後由 MDN 貢獻者 在 修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.