text-decoration-skip
定義元素哪些部分的內(nèi)容需要被文本修飾所跳過，可以控制所有該元素或該元素的祖先所繪制的文本修飾線。
/* 關(guān)鍵字 */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
/* 使用多個(gè)關(guān)鍵字 */
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 |
不跳過任何內(nèi)容。 |
objects |
擁有完整盒模型的原子行內(nèi)元素會(huì)被跳過，例如圖片和行內(nèi)塊元素。 |
spaces |
跳過所有的空格。 |
leading-spaces |
跳過開始的空格。 |
trailing-spaces |
跳過結(jié)尾的空格。 |
edges |
文本修飾的開始與結(jié)束會(huì)比原有的裝飾范圍向內(nèi)收縮（例如半個(gè)線寬）。這樣，相鄰的元素的下劃線就可以分開。（這對(duì)于中文很重要，因?yàn)樵谥形闹?，下劃線也是一種形式的標(biāo)點(diǎn)符號(hào)。） |
box-decoration |
文本修飾會(huì)跳過盒模型的內(nèi)邊距、邊框、外邊距。這只會(huì)影響到祖先元素定義的修飾；修飾的盒不會(huì)渲染本身的盒修飾。 |
示例
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;
}
結(jié)果
400*200
