質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

3148閲覧

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

bah91929

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2018/11/22 01:24

ご回答者様

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

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

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

HTML

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

css

1.sample-a { 2 width: 300px; 3 background: #f4f4f4; 4}

<ブラウザの表示>
イメージ説明

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

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

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

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では折り返し機会の出現について完全な定義をしていません。しかし、いくつかの共通バリエーションを区別するためのコントロールを提供しています」

投稿2018/11/22 02:09

Lhankor_Mhy

総合スコア35865

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bah91929

2018/11/22 02:26

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

2018/11/22 03:20

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

2018/11/22 03:36

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

2018/11/22 04:22

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

2018/11/22 04:40

そうですね。   一般的なブラウザの話ですと、 ・ある単語をスタイルどおりに表示したときにボックスの幅を超過し、 ・ハイフンやラインブレークする記号や<wbr>などが含まれておらず、 ・overflow-wrap、word-break などがデフォルトである場合は、 突き破る、と考えて良いかと思います。   ただ、半角数字や記号が含まれる単語については要検証ではないかと。 ちょっと、↓古い記事ですが。 http://8cmp.blog.fc2.com/blog-entry-43.html
bah91929

2018/11/22 07:24

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

0

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

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

投稿2018/11/22 01:41

otn

総合スコア84423

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bah91929

2018/11/22 02:24

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

2018/11/22 04:19

> テキスト(英文)を入力する際は、毎回word-breakなどを書く必要があるのでしょうか? 幅より長い単語がなければ大丈夫なはずです。
bah91929

2018/11/22 04:26

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

0

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

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

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

投稿2018/11/22 03:10

yoshinavi

総合スコア3521

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

bah91929

2018/11/22 04:24

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

2018/11/22 04:31

>適切な(長くない)「英単語」であれば、突き破らないという事でしょうか? → 設定によりけりです。 設定した幅に対して、「折り返し」を希望するのであれば、「空白区切りの無い英単語の設定自体がダメ」だと思います。 しかし、「長い空白区切りの無い英単語を設定する必要がある」場合には、word-wrap:break-word;等で、都度対処するしかないと思います。
bah91929

2018/11/22 04:37

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問