divの幅が 中身英字だと 固定されない なぜ？

質問

例えば、

<div style="width:200px; background-color:yellow;">
ttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
</div>

とした場合、字列が折り返されず、幅がどんどん伸びてくんですが、

<div style="width:200px; background-color:yellow;">
ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ
</div>

とした場合は、字が折り返されて、幅が固定されます。

ひらがなと英字を混ぜて、

<div style="width:200px; background-color:yellow;">
ああtttttttttttttttttttttああああああああああああaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaああああああああああああああああああああaaaaaaaaaaaaaaああああああああああああああああああああああああああああああああああああああああああああ
</div>

としても、英字が長く続いている分だけ幅が伸びていくようでした。

英字があっても、幅が固定されて、折り返されるようにしたいのですが、
どなたか良い方法があれば教えてください。

回答No.4

suiris

折り返されないようにするには#02さんや#03さんの通りに行うとよいと思います。
もし、ただ指定した幅をはみ出すのが困るというだけならばoverflowを使用してみてはいかがでしょうか。（指定した幅がはみ出したらスクロールバーが表示されるようにする）

回答No.3

abril

他の回答者様やANo.1で参照されている別スレッドでのコメント通り、1バイトの英字がスペースなく連続していれば、ブラウザ側はそれをワン・ワードとして解釈しますから、質問者様の仰る様な現象が起きるのは”当然”の事となります。

CSSにもワープロ・ソフト系にある様なワードラップ機能に当たる"word-break"というプロパティもあるにはあるのですが、IE独自の仕様の為、IEでのみ有効となります。
【参考】
http://www5e.biglobe.ne.jp/~access_r/hp/css/css_text_012.html
http://pinotan.blog15.fc2.com/file/word-break.html

ANo.2様の仰る通り、現実にはそんなに長い単語はありませんので、余程特殊なデータを表示させたいのでもない限り、あまり考慮されなくても宜しい問題かと。

回答No.2

intercity

> 英字があっても、幅が固定されて、折り返されるようにしたいのですが、
> どなたか良い方法があれば教えてください。
実用上、あまり問題無いと思います。
質問者様は
「ttttttttttttttttttttttttttttttttttttttttttttttttttt」
こうすると改行されないと書いてありますが、
実際にはこんな長い単語はそうそうありません。
途中にブランクを入れれば問題ないでしょう。
但し、例として１行目にあと５文字分のスペースが残っているところに
６文字の単語を入れますと、１行目は５文字空いたままで
次の２行目に改行され、改行されたアタマに６文字の単語が入ります。
これは漢字などの全角を含んだ文章でも、
行の終わりに半角の英単語を持ってくれば同じことが起こります。
アルファベットをHTMLの文章に入れる場合、
デコボコしないようにうまく文章を組むのも
ホームページ作成者の腕のうちです。
場合によっては<br>タグを使い、強制改行したほうが見やすい場合もあります。

回答No.1

神崎 渉瑠（@taloo）

http://okwave.jp/qa3839282.html