2016年2月28日(日)
改行について #HTML5&CSS3&JavaScript

　breakを意味する<br>は、不動の改行タグですね。しかし、その他にも、改行に関わる記述がいろいろあります。

　油断していると、HTML5の仕様が覚えているものと違っていたり、ブラウザの仕様が変わっていたり、焦りますね。


【<wbr>】word breakの意。

　一昔、<wbr>は、Netscape Navigator独自タグでした。IEでも利用できるようになり、HTML4.01には採用されませんでしたが、<nobr>文章１<wbr>文章２</nobr>と記述して、改行禁止の文章の中、<wbr>の位置で改行可能として使われてきました。

　HTML5では、欧文に無条件で<wbr>が利用できます。日本語では、改行禁止内で利用できます。しかし、Microsoft EdgeおよびIE11では、日本語に対応していません。相変わらず抜けているブラウザと実感させられますが、大画面のパソコンで見る限り、不要と考えているのでしょうか？。iPhoneでは完全対応、パソコンでもGoogle Chromeが完全対応しているので、おそらくAndroidでも完全対応でしょう。

--HTML5--
<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<wbr>bbbbbbbbbbbbbbbbbbbb<br>cccccccccccccccccccccccccccccc</p>

<p style="white-space:nowrap;">あいうえお<wbr>かきくけこ<wbr>さしすせそ</p>
--


【&shy;】soft hyphenの意。

　欧文で、単語が長い時に、改行しても良い箇所に挿入されます。ブラウザ表示で、その単語が改行に差し掛かったときに、&shy;で改行されると同時に、行末に-ソフトハイフンが付加されます。

　まあ、日本語には関係の無いところです。


【word-wrap:break-word;】

　欧文に改行可能箇所がないと、幅を指定した表示枠内からはみ出るという、何とも格好が悪い見栄えになります。

　スタイルシートで、word-wrap:break-word;を指定しておくと、欧文の単語の途中と言えど、指定した幅で改行してくれます。

　ガレコレでは、日本語環境に配慮して、body {word-wrap:break-word;}を必ず指定しています。<wbr>もちゃんと併用して使えますよ。