半角英数字が改行されない場合に

  • CSS
  • 現在地

可変幅での改行

幅のサイズを設定しないリキッドレイアウトなどの場合、ブラウザの幅を縮小すると、全角の文字は自動で改行されます。

しかし、半角英数字は空白スペースや全角の文字が無い限り改行されません。

そのため、スペースを含まない長いURLやHTMLなどのソースコードを記述する場合、いくら幅が可変になっていても、その半角英数字がボックスからはみ出てしまい、可変のボックスに横スクロールバーが出現してしまいます。

ということで、今回はこのボックスからはみ出た部分をどうするかについて考えてみます。

対処法について考える

半角英数字を強制改行させる

CSSの word-break: break-all; を使用して、強制改行させるという方法です。

この word-break は、テキストの改行を指定する要素で、値 break-all は、言語に関係なく区切り以外でも改行できるようになるものです。
ただ、現在はIEの独自拡張のため使用には適しません。(Chrome , Safariでは効果あり)

2013年02月11日
現在は上記のIE/Chrome/Safari の他に、Firefox/Opera でも利用できるようになっているため、この方法がもっとも有効です。

意図的に <br /> で改行する。
固定幅の場合は、レイアウトが崩れないのでこれでいいでしょうが、可変幅でこれをやる場合 <br /> の位置以外は自動改行なので、ブラウザによっては意図した場所以外でも改行したりします。

例えば、IEやChrome はスラッシュ( / )で改行しませんが、Firefox や Opera は改行します。

長い半角英数字の場合のみ別にボックスを用意し、その中でスクロールさせる

テキストをあらかじめボックスの中に入れ、そのボックスにCSSで overflow: auto; を指定することで、テキストが改行されないときは、そのブロック要素にスクロールバーが出るようにします。

可変幅の場合は、テキストを入れたボックスの幅は width で指定しない限り、親である可変幅のボックスの幅に準拠するようになるので、ボックス自体がはみ出ることはありません。

後書き

とりあえず思いつくだけ書いてみましたが、今のところ私はソースコードなどを書くときは、CSSで overflow: auto; を指定したボックスの中で記述することにしています。

ただ、この方法は中のブロック要素に横スクロールバーを出してスタイルを整えているだけなので、改行させるという目的は果たしていません。

現在は、CSS3の word-break:break-all; と対応していない場合用に、横スクロールの方法を併用しています。

スポンサードリンク

inserted by FC2 system