【CSS】text-decoration-skip

text-decoration-skip

定义元素哪些部分的内容需要被文本修饰所跳过,可以控制所有该元素或该元素的祖先所绘制的文本修饰线。

/* 关键字 */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;

/* 使用多个关键字 */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

/* 全局值 */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;
  • 初始值:objects
  • 适用于:所有元素
  • 继承性:继承

文档

https://developer.mozilla.org/zh-CN/docs/Web/CSS/text-decoration-skip

语法

取值 描述
none 不跳过任何内容。
objects 拥有完整盒模型的原子行内元素会被跳过,例如图片和行内块元素。
spaces 跳过所有的空格。
leading-spaces 跳过开始的空格。
trailing-spaces 跳过结尾的空格。
edges 文本修饰的开始与结束会比原有的装饰范围向内收缩(例如半个线宽)。这样,相邻的元素的下划线就可以分开。(这对于中文很重要,因为在中文中,下划线也是一种形式的标点符号。)
box-decoration 文本修饰会跳过盒模型的内边距、边框、外边距。这只会影响到祖先元素定义的修饰;修饰的盒不会渲染本身的盒修饰。

示例

HTML

<p class="line-through">这是一段<strong class="ib">文本</strong>。</p>

CSS

.line-through {
  text-decoration: line-through;
  text-decoration-color: red;
  text-decoration-skip: objects;
}

.ib {
  display: inline-block;
}

结果

400*200
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 文本颜色 color 颜色属性被用来设置文字的颜色。 CSS的颜色指定:详情见CSS 数据类型 - 篇 注意:对...
    LK_EX阅读 876评论 0 0
  • 字体是布局中重要的一个环节。对字体的调整影响到网页的整体效果。我们设置字体时,可以参照word里面对字体的调整,更...
    loster阅读 1,334评论 0 0
  • CSS CSS3 布局属性 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100 !importan...
    53cfdb355418阅读 516评论 0 0
  • 一、简介 参考CSS 教程[https://www.runoob.com/css/css-tutorial.htm...
    想聽丿伱說衹愛我阅读 716评论 0 1
  • CSS 认识CSS 产生背景 从 HTML 被发明开始,样式就以各种形式存在,最初的 HTML 只包含很少的显示属...
    甄子健阅读 689评论 0 0

友情链接更多精彩内容