スタイルシート(CSS)の技-文章の折り返し・自動改行

TOP > CSS >ブロックから文字がはみ出してしまう場合の対処方法
このエントリーをはてなブックマークに追加

文章がブロックからはみ出す理由

　ボックスから文字がはみ出してしまう事があります。主な理由は、英文の場合に単語と単語の間のスペースが空いていない場合に置きます。 具体的には 長い URL や メールアドレス などで頻繁におきる現象です。その実例と対処方法を紹介します。

ボックスからURLがはみ出す例

CSS

.box_test1 { 
　width:100px; border:1px solid #ccc; background-color:#ddeeff;
 }

HTML

<div class="box_test1">
①あいうえおかきくけこさしすせそたちつてと
</div>

<div class="box_test1">
②one two three four five six seven eight nine ten
</div>

<div class="box_test1">
③http://agweoghapoweighapwiehgaowihegpawghapwiehgpaowhega
</div>

実行例(URLの場合はみ出す)

①あいうえおかきくけこさしすせそたちつてと
②one two three four five six seven eight nine ten
③http://agweoghapoweighapwiehgaowihegpawghapwiehgpaowhega
　どうでしょう？③のURLの場合ボックスからはみ出しているのが確認できたと思います。 それでは何故URLだけがはみ出るか？というと文章の自動改行には「単語の切れ目のみで改行」「単語の途中で改行可」など指定する必要があり、 未指定の場合は標準値になります。 そこで対処方法として自動改行の関連プロパティである word-wrap, word-break, white-space を用いて制御します。 しかし、単語のどの位置で下り返すかを細かく制御する場合はブラウザの互換性など厄介な問題もありますが、多くのはみ出しの問題が URLなどであると思いますので、その場合は word-break:break-all を使用すると良いでしょう。 また様々な折り返しの実験例はこちらをご覧ください。

word-break:break-allで自動折り返し

CSS

.box_test2 {
 width:100px; border:1px solid #ccc; background-color:#ddeeff;
 word-wrap:break-all;
}

HTML

<div class="box_test2">
①あいうえおかきくけこさしすせそたちつてと
</div>

<div class="box_test2">
②one two three four five six seven eight nine ten
</div>

<div class="box_test2">
③http://agweoghapoweighapwiehgaowihegpawghapwiehgpaowhega
</div>

実行例(対処後)

①あいうえおかきくけこさしすせそたちつてと
②one two three four five six seven eight nine ten
③http://agweoghapoweighapwiehgaowihegpawghapwiehgpaowhegapowhegopawiehgo
word-wrapプロパティに break-all を指定することで強制的に改行させることができました。

word-break と word-wrapの違い

word-break と word-wrap プロパティは名前も挙動も似ており区別がなかなかつきません。ただURLのはみ出しはどちらでも対処できます。単語の折り返しの微妙な違いはこちらで確認してください。

リンクに関するスタイルシートの技