<div>内のテキスト

質問

safariで見ると以下のページのように<div>内のテキストが
はみ出して表示されます。
http://okwave.jp/qa3178306.html

divの幅を指定しているときに中のテキストがちゃんと折り返すための
タグはありますでしょうか。

IEやfirefoxなどはちゃんと折り返します。

回答No.1

harawo

解説を後回しにして、対処法を先に述べるなら、「適宜スペースを入れる」となります。

欧文では、行末に長い単語がくると、ワープロの場合、内蔵しているハイフネーション辞書にしたがって、適宜ハイフンを入れて、改行します。ウェブブラウザは、いまのところハイフネーションしてくれるものはありません。テーブルのセル内などに、極端に長い単語を挿入すると、セルの領域を超えてしまい、セル外のテキストやイメージと重なってしまいます。
単語と単語の間を、Safariは、スペースで判別します。対して、Internet Explorer、Firefoxは、それに加えてパーレン（かっこ）の前ないし後ろで、単語の区切りと判別します。
例示のページのソースを見ると、スペースがまったくない一行があるために、Safariで改行されないという結果になるようです。
HTMLの規則として、スペースが必要とされない箇所で、スペースを使うと、無視されることになっています。スペースを二個以上連続して入力すると、二個目以降無視されるのは、ご存じのとおりです。
閉じパーレンと、開始パーレンの間に、スペースを入れると、Safariはそこで改行してくれるでしょう。

お礼

white-space : normal
を、記述することで解決できました。
どうも、ありがとうございました。

補足

ご回答ありがとうございます。

ただ、逆に言うと、おっしゃられている条件でなくても、決まった幅で折り返しているサイトは多く存在するので、CSSなどでなんとかなりませんでしょうか。
ちなみにテーブルだと同じ条件で折り返してくれます。
ある事情で、スペースやBRなどは使いたくない部分でして。
何か情報があれば教えてください。