【HTML・CSS】 文章の一部、文字が領域を突き抜けてしまうのを検証してみた 文章(テキスト)の一部、文字がdivタグなどで囲った領域を 自動改行(折り返し)されず突き抜けてしまう現象をブラウザ毎に確認してみたのでメモ。 先に対処方法を大雑把に説明するとdivタグ(もしくは pタグなど)に CSS(スタイルシート)で word-wrap:break-word; を適用すると自動改行してくれます。 ▼目次 各ブラウザの自動改行の動作一覧表 サンプルソースコード どうして文章の一部が突き抜けるような事になるか、 ブラウザ上での英語文章と日本語文章の自動改行での動作の違いからのようです。 上の画像で改行の比較を見ると日本語文章の改行は1文字単位で自動改行がされていますが 英語文章は1単語(ワード)単位からの改行になります。 そのため、途切れ(スペースや点などで)の無い長い数列や英語文字列になる