2016-05-04 14 views
0

私は2つの<div>を持っています。そのうち1つは「Lorem ipsum」というテキスト、2番目の数字は数字です。私は数字でdivを見つけましたが、固定幅の新しい行に数字をラップしません<div>。なぜ誰かが説明することができます、なぜ、番号は新しい行に折り返さないのでしょうか?この状況は仕様のどこかに記述されていますか?番号は固定幅の新しい行に折り返されません

JSFiddle

div { 
 
    width: 200px; 
 
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div> 
 
<div>111111111111111111111111111111111111111111111111</div>

+0

数字は、彼らが新しい行に折り返されませんし、あなたがコンテンツを溢れてしまいますスペースがない場合。あなたの数字の文字列の真ん中にスペースを追加してみてください、そして、あなたはそれらが新しい行に落ちるのを見るでしょう。 – yBrodsky

答えて

1

ブラウザは、通常のテキストとして数字を扱い、あなたがword-wrapまたはword-breakプロパティのようなものとすることを指示しない限り、それを中断されませんので。次のようなルールを追加します。

div { 
    width: 200px; 
    word-wrap:break-word; 
} 

jsFiddle example

+0

だから、基本的に私のページの固定幅divにこのルールを与えるべきですか?それは悪いか良い練習ですか?私は知らないので、誰かが数字だけのヘッダーを作成したいのであれば、私のページは壊れてしまいます。 – AleshaOleg

+1

これらのdivの内容があなたの例のようにオーバーフローする可能性がある場合、私は確信しています。 – j08691

+0

説明をいただきありがとうございます! – AleshaOleg

1

div { 
 
    width: 200px; 
 
    word-wrap: break-word; 
 
}
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium quasi consequatur nobis magni molestias repudiandae rerum quisquam quo dolore dolorem! Sit eligendi accusamus aliquam consectetur inventore minima, fugiat qui quia.</div> 
 
<div>111111111111111111111111111111111111111111111111</div>

+0

正解ですが説明はありませんが、これをアップフォワードすることはできません。ごめんなさい:( – AleshaOleg

関連する問題