<s>: Strikethrough 元素
<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
結果
技術摘要
規範
| 規範 |
|---|
| HTML # the-s-element |
瀏覽器相容性
載入中…
另見
<s>元素的“另一個自我”——<strike>元素——已廢棄,不應再用於網站。- 如果資料已被刪除,則應使用
<del>元素。 - 應使用 CSS 的
text-decoration-line屬性來實現<s>元素之前的視覺外觀。