【CSS】text-decoration-skip是做什么用的，怎么使用

CSS的text-decoration-skip属性用于定义元素哪些部分的内容需要被文本修饰（如下划线、上划线、删除线等）所跳过。这可以控制所有该元素或该元素的祖先所绘制的文本修饰线。

text-decoration-skip的工作原理：

以text-decoration-skip: ink;为例，这一特性的实现在WebKit中是这样的：

1. 将要加下划线的字形转换回CGPathRef格式的路径。
2. 寻找这些路径和下划线的交错点，这个过程是通过近似地将轮廓（contour）用一条线来表示并与其上下边界进行相交计算来完成的。
3. 在这些交错点之间画下划线，相当于避开了与字形轮廓交错的位置。

text-decoration-skip的使用方法：

1. 基本语法：

text-decoration-skip: auto | [ objects || spaces || ink || edges || box-decoration ];

* `auto`：默认值，由浏览器决定哪些部分应该被跳过。
* `objects`：跳过内联元素（如``、``等）。
* `spaces`：跳过空格字符。
* `ink`：跳过字符的字形轮廓（如字母的下降部分），这在实现下划线避开字母下降部分时特别有用。
* `edges`：跳过行首和行尾的装饰。
* `box-decoration`：跳过与元素背景装饰相交的文本装饰。

2. 示例：

如果你想要下划线避开文本的下降部分（如字母p、g、j等的尾部），你可以这样使用：

p {
  text-decoration: underline;
  text-decoration-skip: ink;
}

但需要注意的是，text-decoration-skip属性的兼容性并不强，不是所有的浏览器都支持这一特性。在编写代码时，请确保你的目标浏览器支持此属性。

以下是一些具体的应用场景：

1. 避免下划线与字符下降部分重叠：

   • 当使用下划线装饰文本时，某些字符（如“g”、“p”、“j”等）的下降部分可能会与下划线重叠，影响可读性。通过设置 text-decoration-skip: ink;，可以使下划线避开这些字符的下降部分，提高文本的可读性。
   • 示例：在正式文档、合同、法律文件等需要清晰展示文本的场合，可以使用此属性来确保文本的可读性。

2. 控制内联元素的文本装饰：

   • 在包含图片、链接、输入框等内联元素的文本中，有时可能不需要对这些元素应用文本装饰线。通过设置 text-decoration-skip: objects;，可以使文本装饰线跳过这些内联元素。
   • 示例：在新闻网站、博客文章等包含丰富内联元素的文本中，可以使用此属性来优化文本装饰的显示效果。

3. 跳过空格和特定字符的文本装饰：

   • 在某些情况下，可能希望跳过文本中的空格或特定字符的文本装饰。通过设置 text-decoration-skip: spaces; 或与其他值组合使用，可以实现这一需求。
   • 示例：在诗歌、歌词等需要保持文本格式和布局的场合，可以使用此属性来精确控制文本装饰的显示位置。

4. 自定义文本装饰的起始和结束位置：

   • 通过设置 text-decoration-skip: edges;，可以控制文本装饰的开始与结束位置，使其向内收缩一定的距离。这在处理中文文本时尤为重要，因为中文中的下划线常作为标点符号使用，适当的收缩可以避免与相邻元素的下划线混淆。
   • 示例：在中文网站、文档等需要精确控制文本装饰的场合，可以使用此属性来优化文本的显示效果。

需要注意的是，text-decoration-skip 属性的兼容性并不强，不同浏览器对该属性的支持程度有所差异。因此，在使用该属性时，需要仔细测试并考虑目标浏览器的兼容性情况。同时，该属性也可以与其他 CSS 文本装饰属性（如 text-decoration-line、text-decoration-color、text-decoration-style 等）配合使用，以实现更丰富的文本装饰效果。