文本装饰线

文本装饰线

用于控制文本装饰线样式的工具类。

Class Styles

Class	Styles
`underline`	`text-decoration-line: underline;`
`overline`	`text-decoration-line: overline;`
`line-through`	`text-decoration-line: line-through;`
`no-underline`	`text-decoration-line: none;`

underline

text-decoration-line: underline;

overline

text-decoration-line: overline;

line-through

text-decoration-line: line-through;

no-underline

text-decoration-line: none;

示例

使用 underline 工具类为元素的文本添加下划线：

The quick brown fox jumps over the lazy dog.

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

使用 overline 工具类为元素的文本添加上划线：

The quick brown fox jumps over the lazy dog.

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

使用 line-through 工具类为元素的文本添加删除线：

The quick brown fox jumps over the lazy dog.

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

使用 no-underline 工具类移除元素文本的装饰线：

The quick brown fox jumps over the lazy dog.

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

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

将鼠标悬停在文本上以查看预期效果

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.

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.