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 · ベストアンサー

例えば

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

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

お礼

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

回答No.2

SAYKA

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

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

お礼

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

回答No.1

yambejp

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

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

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

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

お礼

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