text-box (trim/edge) | Frontend Practical Guide

Limited support 注意して使用。Firefox が未対応で、Chrome / Safari でも新しい実装。実験的に使用し、フォールバックを用意すること。

対応ブラウザ

機能	デスクトップ				モバイル
機能	Chrome	Edge	Firefox	Safari	Chrome Android	Safari iOS
`text-box-trim`	133	133	149	18.2	133	18.2
その他
`css.properties.text-box` text-box は CSS のプロパティで、 text-box-trim および text-box-edge プロパティに対応する一括指定プロパティで、テキスト要素のブロックコンテナーのブロック先頭端とブロック末尾端から切り取る空間の大きさを指定します。	133	133	149	18.2	133	18.2
`css.properties.text-box-edge` text-box-edge は CSS のプロパティで、テキスト要素のブロックコンテナーから切り取る空間の大きさを指定します。	133	133	149	18.2	133	18.2
CSS プロパティ
`auto`	133	133	149	18.2	133	18.2
`none`	133	133	149	18.2	133	18.2
`trim-both`	133	133	149	18.2	133	18.2
`trim-end`	133	133	149	18.2	133	18.2
`trim-start`	133	133	149	18.2	133	18.2
`normal`	133	133	149	18.2	133	18.2
その他
`css.types.text-edge` はenumeratedデータ型で、フォントのブロックの先頭と末尾の端の特定の領域を表すフォントメトリックを指定するキーワードを定義します。各キーワードは、フォントの上端や下端の端の位置を指定します。	133	133	149	18.2	133	18.2
CSS タイプ
`alphabetic`	133	133	149	18.2	133	18.2
`cap`	133	133	149	18.2	133	18.2
`ex`	133	133	149	18.2	133	18.2
`text`	133	133	149	18.2	133	18.2

1+対応 (バージョン) 未対応 ※注釈ありサブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

CSS

/* Shorthand */
.precise {
  text-box: trim-both cap alphabetic;
}

/* Specific styling */
.button-text {
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

/* Trim top only */
.heading {
  text-box: trim-start cap alphabetic;
}

ライブデモ

trim-both

text-box (trim/edge) Trim-both demo.

プレビュー全画面表示

trim-start

text-box (trim/edge) Trim-start demo.

プレビュー全画面表示

Without Trimming

text-box (trim/edge) Without trimming demo.

プレビュー全画面表示

実務での使いどころ

ボタン内テキストの精密な中央揃え

フォント固有の上下余白を除去し、ボタン内のテキストを視覚的に正確に中央に配置する。
テキストとアイコンの揃え

テキストの余白をトリミングして、隣接するアイコンとの垂直位置を正確に揃える。

注意点

Firefox（2026年3月時点）では未対応。フォールバックが必須。
フォントごとにメトリクスが異なるため、トリミング結果はフォントに依存する。

フォールバック戦略

CSS

/* フォールバック：従来の調整 */
@supports not (text-box-trim: trim-both) {
  .button-text {
    line-height: 1;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
  }
}

対応ブラウザ

基本構文

ライブデモ

trim-both

trim-start

Without Trimming

実務での使いどころ

ボタン内テキストの精密な中央揃え

テキストとアイコンの揃え

注意点

フォールバック戦略

アクセシビリティ

参考リンク