?
本文檔使用 php中文網(wǎng)手冊 發(fā)布
text-decoration-skip:none | [ objects || spaces || ink || edges || box-decoration ]
默認值:objects
適用于:所有元素
繼承性:是
動畫性:否
計算值:指定的值
none:不略過:文本裝飾將繪制在所有文本內(nèi)容及行內(nèi)盒上。
objects:略過原子內(nèi)聯(lián)元素(例如圖片或內(nèi)聯(lián)塊)
spaces:略過空白:包括常規(guī)空白(U+0020)、制表符(U+0009)以及不間斷空格(U+00A0)、表意空格(U+3000)、所有固定寬度空格(U+2000至U+200A、U+202F和U+205F)、以及相鄰的字母間隔或單詞間隔。
ink:略過字符繪制處:中斷裝飾線,以顯示文本裝飾件將穿過該字形的文本。用戶代理可能還會在該字形輪廓的兩側(cè)額外的略過一段距離。
edges:用戶代理應(yīng)當(dāng)將裝飾線的起始、結(jié)束位置放置于較所裝飾元素的內(nèi)容邊緣更靠內(nèi)的位置,使得諸如兩個緊密相鄰的元素的下劃線不會顯示為一條下劃線。(這在中文里很重要,對于中文,下劃線是一種標點符號。)
box-decoration:略過盒子的margin,border,padding區(qū)域。需要注意的是,這只針對祖先的裝飾效果,裝飾盒不會繪制自身的裝飾。
對應(yīng)的腳本特性為textDecorationSkip。
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset="utf-8" /> <title>text-decoration-skip_CSS參考手冊_web前端開發(fā)參考手冊系列</title> <meta name="author" content="Joy Du(飄零霧雨), dooyoe@gmail.com, www.doyoe.com" /> <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>都出現(xiàn)</div> </body> </html>
點擊 "運行實例" 按鈕查看在線實例