1. 首页
  2. css

CSS文本装饰跳过

text-decoration-skip属性指定文本下划线、上划线或划破的位置。这提高了修饰文本的易读性,并纠正了某些语言的标点符号语法。这里有一个例子:
a {text-decoration-skip: ink;}
请注意!ink值已更改为全新属性text-decoration-skip-ink: auto;。
如果您的浏览器支持此属性,那么您会注意到每个字符的后代(如\”y\”和\”p\”)在边框周围都有一些空格:
如果您的浏览器不支持此功能,那么这就是您应该从支持此属性的浏览器中得到的结果浏览器:这可能不是文本装饰skip:ink;实际实现时的样子,但这种下行清除样式是Marcin Wichary在这里布局时对完美下划线的设想的一部分。值
– none:装饰线穿过所有对象,包括通常会被跳过的内联对象。
– spaces:装饰线跳过空格、字分隔符和任何用letter-spacing或word-spacing设置的空格。
– ink:装饰线跳过图示符或下降线。
– edges:装饰线在内容的开始边缘之后稍微开始,在内容的结束边缘之前稍微结束。这个属性旨在防止两个并排加下划线的元素看起来像是共享一个下划线。这对于使用下划线作为标点的中文文本很有用。
– box-decoration:装饰线跳过继承的边距、边框和填充。
更新:看起来trailing-spaces值现在已被弃用,因为在规范中找不到它。
因为任何浏览器都不支持此属性,但没有演示,但下面是一个例子,说明了在实现text-decoration-skip后,每个值的外观如何。text-decoration-skip在OSX和iOS中,苹果在2014年末对Safari和iOS浏览器中的text-decoration进行了修改,模仿了text-decoration-skip: ink;的工作方式。虽然text-decoration-skip的价值观还没有正式实施,您可以用-webkit-text-decoration-skip: none;来禁用这个默认行为。
<<<

CSS文本装饰跳过 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%96%87%e6%9c%ac%e8%a3%85%e9%a5%b0%e8%b7%b3%e8%bf%87/