<s>: The Strikethrough element

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Phần tử <s> trong HTML hiển thị văn bản có gạch ngang, hay một đường kẻ xuyên qua. Dùng phần tử <s> để đại diện cho những thứ không còn liên quan hoặc không còn chính xác. Tuy nhiên, <s> không phù hợp khi chỉ ra các chỉnh sửa tài liệu; cho mục đích đó, hãy dùng các phần tử <del><ins> tùy trường hợp.

Try it

<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 */
}

Thuộc tính

Phần tử này chỉ bao gồm các thuộc tính toàn cục.

Khả năng tiếp cận

Sự hiện diện của phần tử s không được hầu hết công nghệ đọc màn hình thông báo trong cấu hình mặc định của chúng. Có thể làm cho nó được thông báo bằng cách sử dụng thuộc tính CSS content, kết hợp với các phần tử giả ::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] ";
}

Một số người dùng trình đọc màn hình cố ý tắt thông báo nội dung tạo ra thêm sự dài dòng. Vì vậy, điều quan trọng là không lạm dụng kỹ thuật này và chỉ áp dụng trong các tình huống mà việc không biết nội dung đã bị gạch ngang sẽ ảnh hưởng xấu đến khả năng hiểu.

Ví dụ

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

Kết quả

Tóm tắt kỹ thuật

Danh mục nội dung Nội dung cụm từ, nội dung luồng.
Nội dung được phép Nội dung cụm từ.
Bỏ thẻ Không được phép, cả thẻ mở và thẻ đóng đều bắt buộc.
Phần tử cha được phép Bất kỳ phần tử nào chấp nhận nội dung cụm từ.
Vai trò ARIA ngầm định deletion
Vai trò ARIA được phép Bất kỳ
Giao diện DOM HTMLElement

Đặc tả

Specification
HTML
# the-s-element

Tương thích trình duyệt

Xem thêm

  • Phần tử <strike>, phiên bản cũ của phần tử <s>, đã lỗi thời và không nên dùng trên các trang web nữa.
  • Phần tử <del> nên được dùng thay thế khi dữ liệu đã bị xóa.
  • Thuộc tính CSS text-decoration-line nên được dùng để đạt được giao diện trực quan trước đây của phần tử <s>.