购物车
登陆 / 注册
微信扫码登陆

推荐手册

text-decoration-skip

text-decoration-skip
检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。
前端控 前端控 更新时间:2019-03-25 10:32:47

text-decoration-skip

语法:

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

默认值objects

适用于:所有元素

继承性:是

动画性:否

计算值:指定的值

取值:

none:不略过:文本装饰将绘制在所有文本内容及行内盒上。

objects:略过原子内联元素(例如图片或内联块)

spaces:略过空白:包括常规空白(U+0020)、制表符(U+0009)以及不间断空格(U+00A0)、表意空格(U+3000)、所有固定宽度空格(U+2000至U+200A、U+202F和U+205F)、以及相邻的字母间隔或单词间隔。

ink:略过字符绘制处:中断装饰线,以显示文本装饰件将穿过该字形的文本。用户代理可能还会在该字形轮廓的两侧额外的略过一段距离。

edges:用户代理应当将装饰线的起始、结束位置放置于较所装饰元素的内容边缘更靠内的位置,使得诸如两个紧密相邻的元素的下划线不会显示为一条下划线。(这在中文里很重要,对于中文,下划线是一种标点符号。)

box-decoration:略过盒子的margin,border,padding区域。需要注意的是,这只针对祖先的装饰效果,装饰盒不会绘制自身的装饰。

说明:

检索或设置对象中的文本装饰线条必须略过内容中的哪些部分。

对应的脚本特性为textDecorationSkip

兼容性:

浅绿 = 支持

红色 = 不支持

粉色 = 部分支持
ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0-11.02.0-40.04.0-45.06.0-7.015.0-29.06.0-7.12.1-4.4.418.0-42.0

7.1-

8.0-webkit-#1

8.0-

8.3-webkit-#1

注意:#1表示支持该属性,但未实现效果。

实例

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />

<style>
.test {
    width: 120px;
    margin-top: 10px;
    -webkit-text-decoration: underline;
    -moz-text-decoration: underline;
    text-decoration: underline;
    padding: 0 50px;
}
.test li {
    -webkit-text-decoration-skip: objects;
    -moz-text-decoration-skip: objects;
    text-decoration-skip: objects;
}
.test span {
    display: inline-block;
}
</style>
</head>
<body>
<div class="test">文本装饰将在<span>每一行</span>都出现</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

效果图:

网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
php中文网
phpstudy
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号