【HTML】タグ+white-space: nowrap;はNG｜みきやのプログラミング部屋

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

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

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

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

Contents

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

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

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

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

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

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

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