CSS - text-spacing-trim

概要

属性名text-spacing-trim
値space-all | normal | space-first | trim-start | trim-both | trim-all | auto
初期値normal
適用可能要素テキスト
継承継承する
サポートhttps://caniuse.com/?search=text-spacing-trim
現時点(2015年1月)では Chrome, Edge, Opera が trim-both, trim-all 以外をサポートしています。
Safari と Firefox は未サポートです。

説明

日本語/韓国語/中国語における 約物文字(句読点や括弧文字)の幅が広くなりすぎないよう、全角の約物文字を半角に変換するなどの調整を制御します。

値行頭変換行末変換連続文字変換全変換
space-allno
normalno前行に収まらない
時のみyes		yesno
space-first先頭行を除いてyes
trim-startyes
trim-both ※1yes
trim-all ※1yes
autoブラウザ依存

※1 現時点(2025年1月) では Chrome, Edge, Opera でもサポートされていません。

使用例

CSS
p {
  text-spacing-trim: trim-start;
}

詳細

行頭変換

行頭の約物文字を半角に変換するか否かを指定します。trim-start, trim-both, trim-all は変換します。space-first は先頭行を除いて変換します。normal, space-all は変換しません。

trim-start
「あああああああああああ」「あああああああああああ」「あああああああああああ」
space-first
「ああああああああああ」「ああああああああああ」「ああああああああああ」
normal
「ああああああああああ」「ああああああああああ」「ああああああああああ」
space-all
「ああああああああああ」「ああああああああああ」「ああああああああああ」

行末変換

行末の約物文字を半角に変換するか否かを指定します。trim-all, trim-both は変換します。trim-start, space-first, normal は前の行の末尾に約物文字が収まらない時のみ変換します。space-all は変換しません。

trim-start
ああああああああああああ」「ああああ」
space-first
ああああああああああああ」「ああああ」
normal
ああああああああああああ」「ああああ」
space-all
ああああああああああああ」「ああああ」

連続文字変換

約物文字が2文字以上連続する場合に半角に変換するか否かを指定します。trim-all, trim-both, trim-start, space-first, normal は変換します。space-all は変換しません。

trim-start
あ【（あ）】（ああ。）ああ
space-first
あ【（あ）】（ああ。）ああ
normal
あ【（あ）】（ああ。）ああ
space-all
あ【（あ）】（ああ。）あ

全変換

すべての約物文字を半角に変換するかを指定します。trim-all は変換します。他のものは変換しません。

trim-start
ああああ（あ）ああああ
space-first
ああああ（あ）ああああ
normal
ああああ（あ）ああああ
space-all
ああああ（あ）ああああ

考察

私だったらこんな仕様にしたかな...

text-spacing-trim: auto | all | [ [ start-of-line | expect-first-line ] || end-of-line || continuous ] | none

リンク

Copyright (C) 2025 杜甫々
初版：2025年1月19日、最終更新：2025年1月19日
https://www.tohoho-web.com/css/prop/text-spacing-trim.htm