CSS TEXT WRAP

text-wrapで、見出しと本文の折り返しを整える

見出しには balance、本文には pretty。 最後の1語だけ落ちるような違和感を、CSSだけで少し減らせます。

Compare カード幅を変えると、折り返しの差が見えます
Default wrap 最後の1語が落ちやすい
Product update

Design tokens that keep product UI consistent

This card explains how small typography choices can make a product dashboard feel more polished and easier to scan.

Read the update
text-wrap 見出しと本文を整える
Product update

Design tokens that keep product UI consistent

This card explains how small typography choices can make a product dashboard feel more polished and easier to scan.

Read the update
How it works
text-wrap

`text-wrap-mode` と `text-wrap-style` のショートハンド。soft wrapをブラウザにどう扱ってほしいか指定します。

wrap

初期値。overflowを避けるため、空白などの自然な候補位置で通常どおり折り返します。

balance

各行の文字数が近くなるように折り返しを再調整します。短い見出し向けで、対象行数には制限があります。

pretty

`wrap` に近い挙動ですが、速度より組版品質を優先し、短すぎる最終行を避ける方向で調整します。

Core CSS 
.card-title {
  text-wrap: balance;
}

.card-description {
  text-wrap: pretty;
}
Point

短い見出しは `balance`、本文は `pretty`。折り返しをCSS側で少し整えられます。