文章はほとんどのHPにあると思いますが、

その文章でちょっと悩ませるのが折り返しについてです。

 

紙とは違い完全に思い通りにはならないものなのですが、

cssでいろいろな設定をすることができます。

 

その主要なものが以下になります。

word-wrap

normal
単語の途中で改行はせず、必要に応じて表示範囲を拡大。
break-word
必要に応じて単語の途中で改行

word-break

normal
英語等は単語の途中では改行せず、単語で改行。日本語等は表示範囲に合わせて改行され、単語の途中で改行されることもある。
break-all
言語に関係なく表示範囲に合わせて改行。単語の途中で改行されることもある。
keep-all
言語に関係なく単語の途中では改行せず、単語で改行。

white-space

normal
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合には、その大きさに応じて自動的に改行。
pre
ソース中の連続する半角スペース・タブ・改行を、そのまま表示。
nowrap
ソース中の連続する半角スペース・タブ・改行を、1つの半角スペースとして表示。ボックスの大きさが指定されている場合にも、自動的に改行されない。

 

となっておりますが、

言葉で説明されてもあまりピンとこないと思いますので、

英語と日本語で実際にhtmlで作成してみましたので、

ご覧ください。
DEMO

あまり変わらないような感じがしますね・・・

word-breakのbreal-allとwhite-spaceのpreが目に見えて違いますが、

おそらくhtmlの状況によって変わってくるのだと思います。

簡単な参考にしてください。

 

ちなみに、DEMOに入ってるテキストは、

以下のサイトで生成されたものを使用しています。

テキスト何入れようかと迷った時はいいですね！

日本語
http://www.blindtextgenerator.com/lorem-ipsum

英語
http://lipsum.sugutsukaeru.jp/index.cgi