長い英単語やURLがボックスやテーブルからはみ出る理由について

Question

ご回答者様

いつもお世話になっております。

「長い英単語やURLがボックスやテーブルからはみ出る理由」について教えていただけますと幸いです。

以下のコードを例にさせていただきます。

<div class="sample-a">
 サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルsamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesamplesample
</div>

.sample-a {
  width: 300px;
  background: #f4f4f4;
}

＜ブラウザの表示＞

このように、なぜ親要素にwidthを指定しているのに長い英単語はボックスを突き破ってしまうのでしょうか？
また、日本語はなぜボックス内に収まるのでしょうか？

突き破ってしまった時の対策はネット上に散見されますが、なぜ突き破ってしまうのか？についての資料を見つけることが出来ませんでした。

その理由や理屈を知っていらっしゃる方がおられましたら、教えていただけますと幸いです。

Answer 1

仕様ではなく実装上の問題です。
日本語を折り返さない実装をしても、仕様違反にはなりません。
あえて言うなら、伝統的にアルファベット圏では単語の途中で折り返さないから、が理由でしょうか。

CSS does not fully define where soft wrap opportunities occur; however some controls are provided to distinguish common variations.

5. Line Breaking and Word Boundaries | CSS Text Module Level 3

（勝手訳）「CSSでは折り返し機会の出現について完全な定義をしていません。しかし、いくつかの共通バリエーションを区別するためのコントロールを提供しています」

Comments

[bah91929]

非常に分かりやすいご回答ありがとうございます。

他の回答者の方にもお尋ねさせていただきましたが、もし可能でございましたら、突き破る時と突き破らない時の違いを教えていただけますと幸いです。

[Lhankor_Mhy]

繰り返しになりますが、仕様ではなくて実装上の問題です。
ですので、「突き破る時と突き破らない時の違い」も実装上の問題になります。
つまり、ブラウザによって違う、ということです。

[Lhankor_Mhy]

もし、一般的なハイフネーションの規則をお伺いならば、このようなエンジニア向けサイトではなくて、英語学習サイトでお尋ねになるのがよろしいでしょう。たとえば、以下のサイトが参考になるかもしれません。
http://www.toishi.info/email/hyphen.html

[bah91929]

同じ長い英単語でもブラウザによって突き破る時と突き破らない時があり、その理由はブラウザにあるという事ですね。

[Lhankor_Mhy]

そうですね。

一般的なブラウザの話ですと、
・ある単語をスタイルどおりに表示したときにボックスの幅を超過し、
・ハイフンやラインブレークする記号や<wbr>などが含まれておらず、
・overflow-wrap、word-break などがデフォルトである場合は、
突き破る、と考えて良いかと思います。

ただ、半角数字や記号が含まれる単語については要検証ではないかと。
ちょっと、↓古い記事ですが。
http://8cmp.blog.fc2.com/blog-entry-43.html

[bah91929]

回答ありがとうございます！
教えてくださった記事も確認しました。
「途切れ(スペースや点などで)の無い長い数列や英語文字列になると
１つの単語（ワード）とみなされて改行するポインが無いため領域を突き抜けてしまいます。」
が特に分かりやすいですね(^^)
解決いたしましたので、ベストアンサーマークを付けさせていただきます。
この度はありがとうございました。

Answer 2

推測になりますが、HTMLのテキストは、英語などの欧米文を想定した物だからでしょう。
英文の行折り返しは、原則として空白の位置で行います。そのために1行の文字数が短くなっても気にしません。長い単語で、どうしてもこの単語の途中で折り返したいという場合は、音節の区切りのところで切って、ハイフンを行末に入れて、単語が継続する事を示します。音節の区切りで切るというのは、その単語を知らないと出来ません。なので、自動折り返しは行わないでしょう。

日本語の場合は、空白による分かち書きを普通はしないために、空白位置での折り返しが不可能です。また、原稿用紙文化があるので、単語の途中での折り返しが普通の事であることから、任意の文字の後で折り返しという仕様になっているのでしょう。

Comments

[bah91929]

早速のご回答ありがとうございます。
HTMLテキストが欧米文を意識したものだとすれば、widthを指定してもテキスト（英文）が指定幅に収まらないのは困った仕様ではないかなと思うのですが、いかがでしょうか？
テキスト（英文）を入力する際は、毎回word-breakなどを書く必要があるのでしょうか？
テキスト（英文）がwidthを突き破らない事もある?という記事も見た気がしまして、もし可能でございましたら、突き破るときと突き破らない時の違いを教えていただけますと幸いです。

[otn]

> テキスト（英文）を入力する際は、毎回word-breakなどを書く必要があるのでしょうか？

幅より長い単語がなければ大丈夫なはずです。

[bah91929]

承知しました！
ありがとうございます。

Answer 3

なぜ親要素にwidthを指定しているのに長い英単語はボックスを突き破ってしまうのでしょうか？

一般的に考えて、そんな英単語の記述が「誤り」ではないのでしょうか？
空白の区切りの無い英単語で、バカみたいに長いのも調べれば世の中にはありますが、そんなのは例外です。

しかし、例外にも対処しないといけない場合もあるので、それが、今回の場合は「word-wrap:break-word;や全角等を使って下さいね。」と言うだけだと思います。

Comments

[bah91929]

ご回答ありがとうございます。
aaaaaaaaaaa…と羅列すると突き破ったりします。
適切な（長くない）「英単語」であれば、突き破らないという事でしょうか？

[yoshinavi]

＞適切な（長くない）「英単語」であれば、突き破らないという事でしょうか？

→ 設定によりけりです。
設定した幅に対して、「折り返し」を希望するのであれば、「空白区切りの無い英単語の設定自体がダメ」だと思います。

しかし、「長い空白区切りの無い英単語を設定する必要がある」場合には、word-wrap:break-word;等で、都度対処するしかないと思います。

[bah91929]

承知しました！
丁寧なご回答ありがとうございます。