知名度が低いウェブ標準ひとり 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 も使ったことはないけど、将来いつかどこかで使う機会はあると思う。