text-decoration-skip CSS3

text-decoration-skip は、テキストを装飾しない部分を指定します。(スキップします)

名前:text-decoration-skip
: none | [ objects || spaces || ink || edges || box-decoration ]
初期値:objects
適用対象:全ての要素
継承:する
パーセンテージ:n/a
メディア:visual(視覚的)
計算値:As specified(指定通り)
アニメーション:できない

Value(値)

none
スキップしません
objects
初期値 画像かインラインブロックならばスキップする
spaces
余白(スペースやタブ)をスキップする
ink
グリフ(字形)が描かれている場所をスキップする
edges
文字の端をスキップする(コンテンツの開始と終了の少し内側をスキップ)
box-decoration
ボックスのマージン、ボーダー、パディングをスキップする

HTML source

<!DOCTYPE html>
<html>
 <head>
  <title></title>
  <style>
   p.test1 { text-decoration-line: underline; text-decoration-skip: none; }
   p.test2 { text-decoration-line: underline; text-decoration-skip: objects; }
   p.test3 { text-decoration-line: underline; text-decoration-skip: spaces; }
   p.test4 { text-decoration-line: underline; text-decoration-skip: ink; }
   p.test5 { text-decoration-line: underline; text-decoration-skip: edges; }
   p.test6 { text-decoration-line: underline; text-decoration-skip: box-decoration; }
  </style>
 </head>
 <body>
   <p class="test1">今日は 	<span style="background: red;">蒸し</span>暑いですね。</p>
   <p class="test2">今日は 	蒸し暑いですね。</p>
   <p class="test3">今日は	蒸し	暑い	ですね。</p>
   <p class="test4">abcdefghijklmnop</p>
   <p class="test5">今日は<i>蒸し</i><i>暑い</i>ですね。</p>
   <p class="test6">今日は<span style="padding: 0 20px; background: red;">蒸し</span>暑いですね。</p>
 </body>
</html>

display

今日は 蒸し暑いですね。

今日は 蒸し暑いですね。

今日は 蒸し 暑い ですね。

abcdefghijklmnop

今日は蒸し暑いですね。

今日は蒸し暑いですね。

上に戻る