CSS辞書

text-spacing-trim

テキスト・フォント

日本語の約物(括弧・句読点など)が持つ余分な空きを自動調整するプロパティです。「(」の前や連続する約物「)。」の間の空きを詰めて、組版ソフトのような美しい日本語テキストをWebで実現します。

構文

Syntax
text-spacing-trim: normal | space-all | space-first | trim-start

コード例

1

body { text-spacing-trim: trim-start; }

行頭の始め括弧の空きを詰める(新聞・書籍風の組版)

2

h1, h2, h3 { text-spacing-trim: space-first; }

段落先頭の括弧は全角のまま、行頭のみ詰める標準的な設定

💡 TIPS

フォント側のかな詰め機能(font-feature-settings: 'palt')が文字全体を詰めるのに対し、text-spacing-trimは約物の空きだけを調整するため本文にも安全に使えます。日本語見出しの「(」で始まる行の不揃い解消に効果的です。

⚠️ よくある間違い

2026年7月時点でChrome/Edge限定(limited)です。非対応ブラウザでは通常の全角空きのままなので表示は壊れませんが、ブラウザ間で見た目が揃わないことは把握しておきましょう。

🤖 AIがよく間違えるポイント

AIは日本語約物の空き調整に、手動のletter-spacing負値指定やJSライブラリ(約物半角化処理)を提案しがちですが、text-spacing-trimがネイティブの解です。日本語組版特有の機能のため英語圏中心のAIは存在自体を知らないことが多く、「text-spacing-trimを使って」と明示するのが有効です。

💬 AIへの頼み方

日本語見出しの「(」で始まる行の字下がりが気になる。text-spacing-trimで組版を整えて

このサイトの日本語本文に、text-spacing-trim・text-wrap・word-break: auto-phraseを組み合わせたモダンな日本語組版設定を提案して

そのままAIチャットに貼り付けて使える依頼文の例です。ページ上部の「AI用にコピー」でこのページ全体をコンテキストとして渡せます。

関連プロパティ

ブラウザサポート

対応が限定的
Chrome
123+
Firefox
未対応
Safari
未対応
Edge
123+

Chrome/Edge限定(2026年7月時点)。非対応ブラウザでは通常の全角空きで表示