<s>: Strikethrough 元素

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

<s> HTML 元素用於渲染帶有刪除線(劃掉)的文字。使用 <s> 元素表示不再相關或不再準確的內容。然而,當指示文件編輯時,<s> 不適用;此時,應酌情使用 <del><ins> 元素。

試一試

<p><s>There will be a few tickets available at the box office tonight.</s></p>

<p>SOLD OUT!</p>
s {
  /* Add your styles here */
}

屬性

此元素僅包含全域性屬性

無障礙

在大多數螢幕閱讀器的預設配置中,s 元素的出現不會被播報。可以透過使用 CSS 的 content 屬性,以及 ::before::after 偽元素來使其被播報。

css
s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}

一些使用螢幕閱讀器的使用者會故意停用播報會產生額外冗餘的內容。因此,重要的是不要濫用此技術,只將其應用於不瞭解內容被劃掉會嚴重影響理解的情況。

示例

css
.sold-out {
  text-decoration: line-through;
}
html
<s>Today's Special: Salmon</s> SOLD OUT<br />
<span class="sold-out">Today's Special: Salmon</span> SOLD OUT

結果

技術摘要

內容類別 措辭內容流內容
允許內容 短語內容.
標籤省略 無,起始標籤和結束標籤都必須存在。
允許父級 任何接受短語內容的元素。
隱式 ARIA 角色 刪除
允許的 ARIA 角色 任意
DOM 介面 HTMLElement

規範

規範
HTML
# the-s-element

瀏覽器相容性

另見

  • <s> 元素的“另一個自我”——<strike> 元素——已廢棄,不應再用於網站。
  • 如果資料已被刪除,則應使用 <del> 元素。
  • 應使用 CSS 的 text-decoration-line 屬性來實現 <s> 元素之前的視覺外觀。