text-decoration-skip

text-decoration-skipCSS のプロパティで、要素に影響する要素の内容に対するテキスト装飾のどの部分をスキップする必要があるかを設定します。これは要素によって描かれたテキスト装飾の行、および祖先によって描かれたすべてのテキスト装飾を制御します。

メモ: 他の多くのブラウザーでは、より単純な text-decoration-skip-ink プロパティへの対応に集中しています。

css
/* キーワード値 */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/* 複数のキーワード */
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: revert;
text-decoration-skip: unset;

構文

none

何もスキップされません。つまり、テキストの装飾はすべてのテキストの内容と不可分のインラインレベルボックスに渡って描かれます。

objects

要素の中で、画像やインラインブロックなどの不可分のインラインボックスのマージンボックス全体がスキップされます。

spaces

すべての空白をスキップします。すべての Unicode ホワイトスペース文字、すべての単語区切りに加えて、子孫の letter-spacing または word-spacing すべてです。

leading-spaces

先頭の空白のみがスキップされるという点を除いて、 spaces と同じです。

trailing-spaces

末尾の空白のみがスキップされるという点を除いて、 spaces と同じです。

edges

テキスト装飾の始点と終点を、装飾ボックスのコンテンツの辺からわずかに (例えば線の太さの半分だけ) 離します。つまり、子孫ボックスには個別に下線が引かれます。 (これは中国語では、区切って下線を引くのに重要です。)

"text-decoration-skip: edges;" の例です。

box-decoration

テキストの装飾はボックスのマージン、境界、パディング領域をスキップします。これは祖先により重ねられた装飾の効果のみを持ちます。装飾ボックスはボックスの装飾の上に描画を行いません。

公式定義

初期値objects
適用対象すべての要素
継承あり
計算値指定通り
アニメーションの種類離散値

形式文法

text-decoration-skip = 
none |
auto

エッジをスキップ

HTML

html
<p>Hey, grab a cup of <em>coffee!</em></p>

CSS

css
p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}

結果

仕様書

Specification
CSS Text Decoration Module Level 4
# text-decoration-skipping

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
text-decoration-skip
Experimental
auto
Experimental
none
Experimental

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support
Experimental. Expect behavior to change in the future.
See implementation notes.
Requires a vendor prefix or different name for use.
Has more compatibility info.

関連情報