1. Web
  2. CSS
  3. Reference
  4. Properties
  5. text-decoration-line

text-decoration-line

Baseline Widely available *

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

* Some parts of this feature may have varying levels of support.

Thuộc tính CSS text-decoration-line xác định loại trang trí được áp dụng lên văn bản trong một phần tử, chẳng hạn như gạch chân hay gạch trên.

Try it

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;
}

Khi cần đặt nhiều thuộc tính trang trí đường văn bản cùng một lúc, có thể tiện hơn khi sử dụng thuộc tính viết tắt text-decoration thay thế.

Cú pháp

css
/* Từ khóa đơn */
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;

/* Nhiều từ khóa */
text-decoration-line: underline overline; /* Hai đường trang trí */
text-decoration-line: overline underline line-through; /* Nhiều đường trang trí */

/* Giá trị toàn cục */
text-decoration-line: inherit;
text-decoration-line: initial;
text-decoration-line: revert;
text-decoration-line: revert-layer;
text-decoration-line: unset;

Thuộc tính text-decoration-line được chỉ định là none, hoặc một hoặc nhiều giá trị cách nhau bởi dấu cách từ danh sách bên dưới.

Giá trị

none

Không tạo ra trang trí văn bản nào.

underline

Mỗi dòng văn bản có một đường trang trí bên dưới.

overline

Mỗi dòng văn bản có một đường trang trí bên trên.

line-through

Mỗi dòng văn bản có một đường trang trí đi qua giữa.

Văn bản nhấp nháy (xen kẽ giữa hiển thị và ẩn). Các tác nhân người dùng tuân thủ có thể không nhấp nháy văn bản. Giá trị này không còn được khuyến nghị thay bởi CSS animations.

spelling-error

Mỗi dòng văn bản sử dụng phương pháp đánh dấu lỗi chính tả của tác nhân người dùng, thường là đường chấm màu đỏ trong hầu hết các trình duyệt.

grammar-error

Mỗi dòng văn bản sử dụng phương pháp đánh dấu lỗi ngữ pháp của tác nhân người dùng, thường là đường chấm màu xanh lá trong hầu hết các trình duyệt.

Note: Khi sử dụng các giá trị spelling-error và grammar-error, trình duyệt bỏ qua các thuộc tính khác trong thuộc tính viết tắt text-decoration (chẳng hạn như text-underline-position, color hay stroke).

Định nghĩa hình thức

Initial valuenone
Applies toall elements. It also applies to ::first-letter and ::first-line.
Inheritedno
Computed valueas specified
Animation typediscrete

Cú pháp hình thức

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

Ví dụ

Ví dụ cơ bản

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;
}

Ví dụ lỗi

Trong ví dụ này, đoạn văn đầu tiên chứa một lỗi chính tả và sử dụng kiểu của trình duyệt cho lỗi chính tả trên từ bị sai. Đoạn văn thứ hai sử dụng kiểu của trình duyệt cho lỗi ngữ pháp. Không có thay đổi kiểu trong các trình duyệt không hỗ trợ các giá trị text-decoration-line này.

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;
}

Đặc tả kỹ thuật

Thông số kỹ thuật
CSS Text Decoration Module Level 3
# text-decoration-line-property

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

Xem thêm

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này