備忘録

【HTML】<wbr>タグ+white-space: nowrap;はNG

折り返し候補の位置を指定したいときにwhite-space: nowrap;で改行禁止にしたうえで、<wbr>タグの位置でのみ改行を許すという方法。

PC,SPともにFirefoxには有効でないようです。

正確には<wbr>タグが効きません。

改行されずはみ出してしまいます。

Contents

word-break: keep-all;を使おう

<style type="text/css">
p{
  /* white-space: nowrap; */
  word-break: keep-all;
}
</style>

<p>hoge<wbr>fuga</p>

大きな修正なくモダンブラウザに対応させるためには、<wbr>タグ+white-space: nowrap;を<wbr>タグ+word-break: keep-all;に変更すればOKです。

この方法であれば、<wbr>タグを含むhtml文書を書き換える必要もありません。

違いと副作用について

word-break: keep-all;は、<wbr>タグの他に記号や半角スペースの位置でも改行を許す指定になります。

なので、それらが含まれる(かつそこでは改行したくない)文章をword-break: keep-all;に書き換えると、その部分で改行される可能性があります。

参考:word-break – CSS: カスケーディングスタイルシート | MDN