●半角英数字だとblock表示できない？？？

解決済

質問者：kana01068
質問日時：2008/07/29 23:55
回答数：2件

こんばんは☆CSSの勉強中です☆

どうしてもわからないのでご質問させてください！

●html
<div class="block">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class="block">
あああああああああああああああああああああああああああああ
</div>

●css
.block{width:150px;}

このように入れたとき、ひらがなの”あ”は
ああああああ
ああああああ
ああああああ

上記のように四角に？表示されるのですが、
aはまっすぐ、そのまま表示されます。。。

ちなみにIE７とモジラで確認しています。

これはなぜでしょうか？？

ちなみにdisplay:block;と入れても同じでした。。
aaaaaaaaaをああああのように表示するにはどうしたらよいでしょうか？？

どなたかぜひ、教えてください！

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

No.1

回答者： grumpy_the_dwarf
回答日時：2008/07/30 00:14

DIV要素直下に生のテキストがあるのは変ですがそれはさておき、

欧文の規則では単語の途中でどこでも勝手に改行するということは
ありえません。単語間のスペースでのみ改行します。だから、単語
の幅がブロックの幅を超えるなら、はみ出すことを許容するしかな
いですね。

欧文として不自然じゃない間隔でスペースを入れましょう。

- 0
- 件

通報する

この回答へのお礼

！！
本当ですね！
早速試してみました！

全然知りませんでした。ありがとうございました！

通報する

お礼日時：2008/07/30 23:35

No.2ベストアンサー

回答者： sh_hirose
回答日時：2008/07/30 23:16

IE5.5以上のみですが

word-wrap:break-word;
というのがあります。

こんな感じです。
<html>
<head></head>
<body>
<div style="word-wrap:normal;width:50px;border: solid 1px #0000ff;">
aaaaaaaaaaaaaaaaaaa
</div>
<br/>
<div style="word-wrap:break-word;width:50px;border: solid 1px #0000ff;">
aaaaaaaaaaaaaaaaaaa
</div>
</body>
</html>

FireFoxとかネスケなんかでは変わりません。

ブラウザは英単語によって文字の折り返しを行っています。
つまり半角スペース、または特定の記号で折り返されます。