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

TOP > CSS > ブロックから文字がはみ出してしまう場合の対処方法 > 文章の折り返しに関するスタイルシートプロパティの実験
このエントリーをはてなブックマークに追加

word-break, word-wrap, white-space の動作例

以下のソースの●●●:△△△ に word-break:△△△, word-wrap:△△△, white-space:△△△ などを代入した実験結果です。
<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プロパティ

word-break:normal

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

word-break:keep-all

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

word-break:break-all

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

word-wrapプロパティ

word-wrap:normal

日本三大夜景の一つ。摩耶山(まやさん)標高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

white-spaceプロパティ

white-space:normal

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

white-space:pre

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

white-space:nowrap

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

white-space:pre-wrap

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

white-space:pre-line

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

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