【CSS】text-box-trimプロパティでテキスト上下余白を調整

どうも、くまだです。

text-box-trimプロパティを使ってテキスト上下にある余白をトリミング・調整するあれこれ。

フォントをなめらかにする方法についてはこちら。

【CSS】フォントをなめらかにするfont-smoothing

どうも、くまだです。 フォントをなめらかにするCSSのfont-smoothingについて。 文字詰め調整につ…

weblife.ppmp556.com

text-box-trimプロパティ

text-box-trimプロパティはテキスト上下の余白を調整するプロパティです。

テキスト上下の余白とは例えば、以下のような上下余白です。

<p class="text">あああああ</p>

.text {
  background-color: orange;
  line-height: 2;
  font-size: 100px;

}

余白を視覚的に分かりやすくするために背景色をつけています。テキスト上下には余白が発生しているのがわかります。line-heightプロパティを指定すると、行全体の高さが大きくなることがあり、そのときに発生する余白が「ハーフ・レンディング」と呼ばれています。

おおざっぱにいうと、font-sizeの数値ｘline-heightの数値＝行の高さになるので、テキストは上の場合は100pxでも行全体の高さは200pxになります。テキストと行全体の高さの差分が余白として表示されます。

text-box-trimプロパティを使うとその余白を調整できます。

  <div class="box">
    <p class="text">あああああ</p>
    <p class="text trim">あああああ</p>
  </div>

.box {
  display: flex;
  align-items: center;
  gap: 10px;

  padding: 40px;
}



.text {
  background-color: orange;
  line-height: 2;
  font-size: 100px;

}

.trim {
  text-box-trim: trim-both;

}

text-box-trimプロパティは以下の値を取ることができます。

• none：初期値。余白を調整しない。
• trim-both：上下の余白を調整する
• trim-start：上の余白を調整する。
• trim-end：下の余白を調整する。

また、text-box-edgeプロパティを使って余白調整開始位置を指定できます。以下のように指定できます。

.trim {
  text-box-trim: trim-both;
  text-box-edge: text;
}

text-box-edgeプロパティは、以下のような値を取ることができます。

• text：初期値。上部はtext-over-baseline、下部はtext-under baselineで調整。
• cap：上部を英大文字のの上限で調整。
• alphabetic：下部を小文字xの下限で調整。

text-box-edgeの値は、text-boxプロパティに一括で記述できます。

.trim {
  text-box: trim-both cap alphabetic;
}

2025年6月現在はFirefoxブラウザ以外では対応済です。

ここまで読んでくださりありがとうございました。