CSS - text-box

• トップ
• CSSリファレンス
• text-box

概要

説明

多くのフォントの上下には隙間(レディング)があります。上下に半分ずつあるので ハーフレディング と呼ばれます。text-box はこのレディングを除去(トリミング)します。text-box は text-box-trim と text-box-edge のショートハンド(一括指定プロパティ)です。

normal

上下の隙間(レディング)の除去(トリミング)を行いません。

<text-box-trim>

上、下、または上下のトリミングを行います。

<text-box-edge>

どの位置までトリミングを行うかを指定します。

詳細

ボタンテキストの上下左右の余白を調整する例

レディングは上下にあるので、padding: 10px でボタンを作成すると、左右の隙間より上下の隙間の方が大きく感じてしまいます。

button {
  padding: 10px;
}

このアンバランスを解消するために padding: 8px 10px などで上下の余白のバランスをとったりしますが、その代わりに text-box を用いることで上下のレディングを除去することができます。

※ Chrome など text-box サポート済ブラウザで確認してください。

button {
  padding: 10px;
  text-box: trim-both cap alphabetic;
}

画像の上部にテキストの上部を合わせる例

画像とテキストを横に並べた場合、テキスト上部にレディングがあるため画像の上端とテキストの上端に差異が生じてしまいます(左側)。text-box で上部のレディングを切り取ることで画像の上部とテキストの上部を合わせることができます(右側)。

.my-card {
  .title {
    ...
    text-box: trim-start cap alphabetic;
  }
}

Black Keyboard

This is a black keyboard ...

Black Keyboard

This is a black keyboard ...

関連項目

• text-box-trim
• text-box-edge

使用例

.my-example {
  button {
    font-family: "Roboto";
    border: 1px solid #339;
    border-radius: 16px;
    background-color: #339;
    padding: 10px;
    color: #fff;
    cursor: pointer;
    &.text-box-trim {
      text-box: trim-both cap alphabetic;
    }
  }
}

<div class="my-example">
  <button>JavaScript</button>
  <button class="text-box-trim">JavaScript</button>
</div>

リンク

• https://www.w3.org/TR/css-inline-3/#text-box-shorthand
• https://developer.chrome.com/blog/css-text-box-trim?hl=ja
• https://caniuse.com/mdn-css_properties_text-box