知名度が低いウェブ標準ひとり Advent Calendar 2021 – 10 日目

今日は <wbr> です。Word BReak だと思う。<br> みたいに改行するんだけど、必要な場合にのみ次の行へ送ります。単語を分割できる。

基本的な使い方

改行してもいいかなって箇所に <wbr> を差し込みます。

Super<wbr>Long<wbr>Long<wbr>Long<wbr>Word

デモ見てみてください。

ハイフン区切りなら &shy;

シャイじゃなくて Soft HYphen です。

Super&shy;Long&shy;Long&shy;Long&shy;Word

日本語はだめ

普通の文章は良いけど、ちょっと目立つ見出しとかキャッチコピーみたいな場所だと「適切」な箇所で改行してほしい場合があります。

日本語だと(約物は別にして)どこでも改行できるので、<wbr> の意味がありません。文章のかたまりごとに <span> あたりで括って display: inline-block を与えるのが良さそう。

これもデモ見てみてください。

量が多いときは人力でやってられないので、ツールを使って自動化しましょう。

語の途中ではなく補語直後等で自然に改行される様子。BudouX の README より。

おしまい

<wbr>&shy; も BudouX も使ったことはないけど、将来いつかどこかで使う機会はあると思う。

参考