Web・HTML・CSSのテキスト改行と複数半角スペースの処理に関して - くらげだらけ（くだくらげのBLOG）

Webで開発をしていてたまに上がってくる問題として、テキストの改行についてあると思います。特にWebサービスのような編集者以外のユーザーがテキストを入力した任意のメッセージなどを表示する場合、改行に関して様々なトラブルが起きたりすることがあります。編集者（作り手側）の場合は適切な箇所で改行タグを入れたり、閲覧者が適切に読めるように文章を改変したりできるのですが、ユーザーにそこまで考慮させるのは難しいことです。 またWebサービスには他にもトラブルの原因となることがあります。Webは様々な環境で閲覧・使用することが可能だということです。PCや携帯、スマートフォン、タブレットなどのデバイスの差異ももちろんありますが、閲覧するソフトウェア（Webブラウザなど）によっても表示のされ方が異なってしまいます。 （できる範囲ではありますが）すべての環境でトラブルなく適切に表示するにはどうしたら良いか？ また近年ではWebアプリケーションでよりネイティブなアプリケーションを作ることも増えてきました。半角スペースを複数連続して入力した場合、Webでは半角スペースを一つとして表示するのが暗黙の了解的になっています。しかし、よりネイティブなアプリケーションを目指したとき、そうも言えない場面もあると思います。 その辺りに関して最近学んだことを書いてみようと思います。 改行のトラブル 改行表示関係でよくあるのはURL 文字列が飛び出して表示されてしまうという現象です。 左上の図ではURLが枠内におさまらずに飛び出してしまっています。ローマ字の場合単語の途中で改行されると単語の意味や文章が変わってしまうため、通常改行ポイントになりうるのは半角スペースやハイフンといった記号の後になります。そのため左上の図でも飛び出した後にハイフンの後で改行されていると思います。 これを解決するには「word-wrap:break-word」が有効だと思います。 以下 W3C.orgより（http://www.w3.org/TR/css3-text/#overflow-wrap） 'break-word' An unbreakable "word" may be broken at an arbitrary point if there are no otherwise-acceptable break points in the line. Shaping characters are still shaped as if the word were not broken, and grapheme clusters must together stay as one unit.

http://bit.ly/PH2XTw