CSSのtext-box-trim

テキストの上下余白調整のSample


概要
- `text-box-trim` プロパティと `text-box-edge` プロパティを使うことで、テキスト要素の上下のスペースを調整が可能 - 2025/03/26現在、対応していないモダンブラウザはFirefoxのみ - `line-height: 1;` で余白調整した場合、改行が入った場合に行間が詰まって見える問題点があった - `text-box-trim` プロパティ: 上下のスペースのうち、どちらをトリミングするかを指定 - `none`: 初期値。スペースをトリミングしない - `trim-both`: 上下両方のスペースをトリミングする - `trim-start`: 上のスペースをトリミングする - `trim-end`: 下のスペースをトリミングする - `text-box-edge` プロパティ: トリミングを開始する位置を指定 - `text`：初期値。上部を `text-over baseline` (フォントのアセンダーラインを含む)、下部を `text-under baseline` (フォントのディセンダーラインを含む) の位置でトリミング - `cap`：上部を `cap-height baseline` (英大文字Xの上限) の位置でトリミング - `alphabetic`：下部を `alphabetic baseline` (英小文字xの下限) の位置でトリミング - `text-box` プロパティを使用すると、`text-box-trim` プロパティと `text-box-edge` プロパティを一括で指定可能

デモ1

text-box-trim プロパティ

● text-box-trim: none;

Text テキスト jp Text テキスト jp

● text-box-trim: trim-start;

Text テキスト jp Text テキスト jp

● text-box-trim: trim-end;

Text テキスト jp Text テキスト jp

● text-box-trim: trim-both;

Text テキスト jp Text テキスト jp


text-box-edgeプロパティ

● text-box-trim: trim-both; text-box-edge: text;



Text テキスト jp Text テキスト jp

● text-box-trim: trim-both; text-box-edge: cap alphabetic;



Text テキスト jp Text テキスト jp


デモ2
プロパティ Defaultフォント Noto Sans JP
text-box: none; (※未指定の場合) Loginボタン Loginボタン
text-box: trim-both text; Loginボタン Loginボタン
text-box: trim-both cap alphabetic; Loginボタン Loginボタン
text-box: trim-both cap alphabetic;、上下均等にpaddingを追加 Loginボタン Loginボタン

参照