プロが教えるわが家の防犯対策術!

例えば、

<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>

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


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

A 回答 (4件)

折り返されないようにするには#02さんや#03さんの通りに行うとよいと思います。


もし、ただ指定した幅をはみ出すのが困るというだけならばoverflowを使用してみてはいかがでしょうか。(指定した幅がはみ出したらスクロールバーが表示されるようにする)
    • good
    • 0

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



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

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

> 英字があっても、幅が固定されて、折り返されるようにしたいのですが、


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

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!