text-decoration-skip-ink

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

text-decoration-skip-inkCSS のプロパティで、上線や下線が文字のアセンダーやディセンダーを通過するときにどのように引くのかを指定します。

試してみましょう

text-decoration-skip-inktext-decoration 一括指定の一部ではありません。

構文

css
/* 単一キーワード */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;
text-decoration-skip-ink: all;

/* グローバルキーワード */
text-decoration-skip-ink: inherit;
text-decoration-skip-ink: initial;
text-decoration-skip-ink: revert;
text-decoration-skip-ink: revert-layer;
text-decoration-skip-ink: unset;

none

下線と上線は、アセンダーとディセンダーの部分を含め、テキストコンテンツの全体に渡って引かれます。

auto

既定値です。 — ブラウザーは、下線と上線が文字に触れたり近づいたりしないよう、中断を行う可能性があります。つまり、線が文字を横切ろうとするところで中断されます。

all

ブラウザーは、下線や上線が文字に触れたり近づいたりしないように必ず中断を行います。これは、 auto の動作が中断を発生させない可能性がある中国語、日本語、韓国語の特定のフォントで有用です。

"text-decoration-skip-ink" の例

公式定義

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

形式文法

text-decoration-skip-ink = 
auto |
none |
all

HTML

html
<p>You should go on a quest for a cup of coffee.</p>
<p class="no-skip-ink">Or maybe you'd prefer some tea?</p>
<p>この文は、 text-decoration-skip-ink: auto の使用例を示しています。</p>
<p class="skip-ink-all">
  この文は、 text-decoration-skip-ink: all の使用例を示しています。
</p>

CSS

css
p {
  font-size: 1.5em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto; /* this is the default anyway */
}

.no-skip-ink {
  text-decoration-skip-ink: none;
}

.skip-ink-all {
  text-decoration-skip-ink: all;
}

結果

仕様書

Specification
CSS Text Decoration Module Level 4
# text-decoration-skip-ink-property

ブラウザーの互換性

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-ink
all
auto
none

Legend

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

Full support
Full support
No support
No support
See implementation notes.

関連情報