質問: ご回答者様 いつもお世話になっております。 「長い英単語やURLがボックスやテーブルからはみ出る理由」について教えていただけますと幸いです。 以下のコードを例にさせていただきます。 ``` サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルsamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesample ``` ``` .sample-a { width: 300px; background: #f4f4f4; } ``` <ブラウザの表示> ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/6ef8272422000083c60b6f9bf23f1673.png) このように、なぜ親要素にwidthを指定しているのに長い英単語はボックスを突き破ってしまうのでしょうか? また、日本語はなぜボックス内に収まるのでしょうか? 突き破ってしまった時の対策はネット上に散見されますが、なぜ突き破ってしまうのか?についての資料を見つけることが出来ませんでした。 その理由や理屈を知っていらっしゃる方がおられましたら、教えていただけますと幸いです。
回答: > > なぜ親要素にwidthを指定しているのに長い英単語はボックスを突き破ってしまうのでしょうか? > > > 一般的に考えて、そんな英単語の記述が「誤り」ではないのでしょうか? 空白の区切りの無い英単語で、バカみたいに長いのも調べれば世の中にはありますが、そんなのは例外です。 しかし、例外にも対処しないといけない場合もあるので、それが、今回の場合は「`word-wrap:break-word;`や全角等を使って下さいね。」と言うだけだと思います。