text-decoration-style

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

快速参考

类	属性
decoration-solid	text-decoration-style: solid;
decoration-double	text-decoration-style: double;
decoration-dotted	text-decoration-style: dotted;
decoration-dashed	text-decoration-style: dashed;
decoration-wavy	text-decoration-style: wavy;

示例

基础示例

使用 decoration-dotted 和 decoration-dashed 等工具类来更改元素的文本装饰样式：

decoration-solid

The quick brown fox jumps over the lazy dog.

decoration-double

decoration-dotted

The quick brown fox jumps over the lazy dog.

decoration-dashed

The quick brown fox jumps over the lazy dog.

decoration-wavy

The quick brown fox jumps over the lazy dog.

<!-- [!code classes:decoration-solid,decoration-double,decoration-dotted,decoration-dashed,decoration-wavy] -->
<p class="underline decoration-solid">The quick brown fox...</p>
<p class="underline decoration-double">The quick brown fox...</p>
<p class="underline decoration-dotted">The quick brown fox...</p>
<p class="underline decoration-dashed">The quick brown fox...</p>
<p class="underline decoration-wavy">The quick brown fox...</p>

响应式设计

使用 md: 等断点变体前缀，即可让 text-decoration-style 工具类仅在中等及以上屏幕尺寸下生效：

<p class="underline md:decoration-dashed ...">
 Lorem ipsum dolor sit amet...
</p>

在变体文档中了解更多关于使用变体的信息。