知名度が低いウェブ標準ひとり Advent Calendar 2021 – 10 日目
今日は <wbr> です。Word BReak だと思う。<br> みたいに改行するんだけど、必要な場合にのみ次の行へ送ります。単語を分割できる。
基本的な使い方
改行してもいいかなって箇所に <wbr> を差し込みます。
Super<wbr>Long<wbr>Long<wbr>Long<wbr>Word
デモ見てみてください。
ハイフン区切りなら ­
シャイじゃなくて Soft HYphen です。
Super­Long­Long­Long­Word
日本語はだめ
普通の文章は良いけど、ちょっと目立つ見出しとかキャッチコピーみたいな場所だと「適切」な箇所で改行してほしい場合があります。
日本語だと(約物は別にして)どこでも改行できるので、<wbr> の意味がありません。文章のかたまりごとに <span> あたりで括って display: inline-block を与えるのが良さそう。
これもデモ見てみてください。
量が多いときは人力でやってられないので、ツールを使って自動化しましょう。

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