text-decoration-line

Các tiện ích để kiểm soát decoration của văn bản.

ClassStyles
underline
text-decoration-line: underline;
overline
text-decoration-line: overline;
line-through
text-decoration-line: line-through;
no-underline
text-decoration-line: none;

Ví dụ

Gạch chân văn bản

Sử dụng tiện ích underline để thêm gạch chân vào văn bản của một phần tử:

The quick brown fox jumps over the lazy dog.

<p class="underline">The quick brown fox...</p>

Thêm gạch trên văn bản

Sử dụng tiện ích overline để thêm gạch trên vào văn bản của một phần tử:

The quick brown fox jumps over the lazy dog.

<p class="overline">The quick brown fox...</p>

Thêm gạch ngang văn bản

Sử dụng tiện ích line-through để thêm gạch ngang qua văn bản của một phần tử:

The quick brown fox jumps over the lazy dog.

<p class="line-through">The quick brown fox...</p>

Loại bỏ gạch khỏi văn bản

Sử dụng tiện ích no-underline để loại bỏ gạch khỏi văn bản của một phần tử:

The quick brown fox jumps over the lazy dog.

<p class="no-underline">The quick brown fox...</p>

Áp dụng khi hover

Prefix a text-decoration-line utility with a variant like hover:* to only apply the utility in that state:

Di chuột qua văn bản để thấy hành vi mong đợi

The quick brown fox jumps over the lazy dog.
<p>The <a href="..." class="no-underline hover:underline ...">quick brown fox</a> jumps over the lazy dog.</p>

Learn more about using variants in the variants documentation.

Responsive design

Prefix a text-decoration-line utility with a breakpoint variant like md: to only apply the utility at medium screen sizes and above:

<a class="no-underline md:underline ..." href="...">  <!-- ... --></a>

Learn more about using variants in the variants documentation.

Copyright © 2025 Tailwind Labs Inc.·Chính sách thương hiệu