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

TOP > CSS > ブロックから文字がはみ出してしまう場合の対処方法 > word-break:break-all, word-wrap:break-word の挙動の違い
このエントリーをはてなブックマークに追加

word-break:break-all, word-wrap:break-word の挙動の違い

　word-break と word-wrap プロパティは名前も挙動も似ており区別がなかなかつきませんが、単語の折り返しの微妙な違いがありますので以下の実験サンプルをご確認ください。
＊ブラウザのメーカーやバージョンによっても挙動が異なる場合があります。
　実験例では以下のソースの●●●:△△△ に
word-break:break-all, word-wrap:break-word
を代入した実験結果です。
<div style="background-color:#ddeeff;width:250px;●●●:△△△;">
日本三大夜景の一つ。摩耶山(まやさん)標高700mからの掬星台の夜景。"手で星を掬（すく）える"ほどの絶景の夜景が遠くまで広がっていることが名前の由来にもなっており、神戸・大阪の夜景が遠くまで広がる。abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 abcdefg hijklmn opqrstu vwxyz 012 345 6789 abcdefg hijklmn opqrstu vwxyz 01234 56789
</div>

word-break:break-all

日本三大夜景の一つ。摩耶山(まやさん)標高700mからの掬星台の夜景。"手で星を掬（すく）える"ほどの絶景の夜景が遠くまで広がっていることが名前の由来にもなっており、神戸・大阪の夜景が遠くまで広がる。abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 abcdefg hijklmn opqrstu vwxyz 012 345 6789 abcdefg hijklmn opqrstu vwxyz 01234 56789

word-wrap:break-word

日本三大夜景の一つ。摩耶山(まやさん)標高700mからの掬星台の夜景。"手で星を掬（すく）える"ほどの絶景の夜景が遠くまで広がっていることが名前の由来にもなっており、神戸・大阪の夜景が遠くまで広がる。abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789 abcdefg hijklmn opqrstu vwxyz 012 345 6789 abcdefg hijklmn opqrstu vwxyz 01234 56789

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