• ベストアンサー

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

こんばんは☆CSSの勉強中です☆ どうしてもわからないのでご質問させてください! ●html <div class="block"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa </div> <div class="block"> あああああああああああああああああああああああああああああ </div> ●css .block{width:150px;} このように入れたとき、ひらがなの”あ”は ああああああ ああああああ ああああああ 上記のように四角に?表示されるのですが、 aはまっすぐ、そのまま表示されます。。。 ちなみにIE7とモジラで確認しています。 これはなぜでしょうか?? ちなみにdisplay:block;と入れても同じでした。。 aaaaaaaaaをああああのように表示するにはどうしたらよいでしょうか?? どなたかぜひ、教えてください!

質問者が選んだベストアンサー

  • ベストアンサー
  • sh_hirose
  • ベストアンサー率66% (56/84)
回答No.2

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とかネスケなんかでは変わりません。 ブラウザは英単語によって文字の折り返しを行っています。 つまり半角スペース、または特定の記号で折り返されます。

kana01068
質問者

お礼

わぁ☆そんな方法があるんですね!面白いです☆ 対応ブラウザまで詳しく教えてくださり、ありがとうございます☆ とっても勉強になりました☆

その他の回答 (1)

回答No.1

DIV要素直下に生のテキストがあるのは変ですがそれはさておき、 欧文の規則では単語の途中でどこでも勝手に改行するということは ありえません。単語間のスペースでのみ改行します。だから、単語 の幅がブロックの幅を超えるなら、はみ出すことを許容するしかな いですね。 欧文として不自然じゃない間隔でスペースを入れましょう。

kana01068
質問者

お礼

!! 本当ですね! 早速試してみました! 全然知りませんでした。ありがとうございました!

関連するQ&A