span要素にのみwhite-space: nowrapを指定したい

CSSによる改行指定が思う様にできなくて困っています。

幅400pxのボックスの中で、<span>～</span>の間では改行せず、</span>と<span>の間で自動改行するようにしたいと考えています。

スタイルシートに
div{width:400px;}
span{white-space: nowrap;}

HTMLに
<div>
<span>type1</span><span>type2</span><span>type3</span>...
</div>

のように表記したのですが、実際にはdivで指定した幅を無視してどこまでも改行なしで表示されてしまいます。
どのように指定すれば目指している形にできるでしょうか？

No.3 ベストアンサー 回答者： noname#66720 回答日時： 2008/07/24 18:36

例えば

<div>
<span>type1</span> <span>type2</span> <span>type3</span>...
</div>

こんな感じで半角スペースを挿入すると改行はされるはずです。

この回答へのお礼

灯台もと暗し、というか、あまりにシンプルな解決方法に目から鱗でした。
まさしく希望していた通りの表示になりました。
ありがとうございます！

お礼日時：2008/07/24 18:41

No.2 回答者： SAYKA 回答日時： 2008/07/24 18:31

white-spaceは「空白文字」に関する処理の仕方を設定するものだから質問文をそのまま解釈するなら「空白文字が無いので正しい動作」と言うしかないよ。

でもまぁspanにfloatで希望の状態にはできるみたい。

この回答へのお礼

単語の区切りで改行させる目的のものなんですね。
勉強になりました。
ありがとうございます。

お礼日時：2008/07/24 18:37

No.1 回答者： yambejp 回答日時： 2008/07/24 18:18

spanは区切りにならないので半角文字がつづくかぎり改行しないでしょうね

おもいきってブロック要素にしてしまうととか・・・

div span{
display:block;
float:left;
width:auto;
}

でも外側のdivがなかのspanの幅をりかいできないのできちんと
囲んでくれなかたりするんで、ちょっと工夫が必要ですね

この回答へのお礼

なるほど！
ブロック要素にしてfloatという手がありましたね！
早速試してみたところ問題なく表示されているようです。
記述が増えるとレイアウトが崩れてくるかもしれませんが今のところはこのままで行けそうです。
どうもありがとうございました。

お礼日時：2008/07/24 18:35