単語の禁則処理に関しては、結構無頓着であんまりそういう事がなかったのもあり、イマイチ分かってないんですけど、ブラウザによる差異が激しい問題の一つだと思います。たぶん。
Firefox3になってから、URLなどが長い場合折り返されるようになったみたいだけど、単純な半角英数の羅列だとやっぱり折り返してくれないんですね。ちと残念。
で、今回はむしろ折り返さないで欲しいっていう状況の時の処理に悩んだのでメモがてら。
サンプルは以下より確認できます。
取りあえず、サンプル見てもらうと2つ似たようなのがあるんですが、タグクラウドみたいなのを作ったときに普通に作ると多分2番目みたいになるかと思います。
通常はコレで問題ないのです。
なにせ、1番目みたいにすると、長いテキストが入った場合に折り返してくれないので、はみ出したりしてしまいます。
更に、IE6だとoverflow: hidden;の指定が無い場合はボックスの幅を広げてしまうので、カラム落ちしてしまったりといい事がありません。
が、基本的に短いテキストで羅列されるなら、1番目のようになっていた方が一つの単語の途中で改行されないので、読みやすくなったりします。
そうなんですよね。読みやすくなるのです。なら、やった方がいいよね。
っていうことで、やる事になったのですが、中々ブラウザによって言う事を聞いてくれず、色々悩んだりした挙句、以下のようなCSSで意図した感じに出来ました。
#main ul.tagList {
width: 510px;
margin: 10px 0;
padding: 15px;
background: #f0f8ff;
}
#main ul.tagList li {
display: inline;
margin-right: 10px;
white-space: nowrap;
line-height: 2;
}
*:first-child + html #main ul.tagList li {
float:left;
}
* html #main ul.tagList {
overflow: hidden;
}
* html #main ul.tagList li {
float:left;
}
今回、リストで並べてるので、何はともあれdisplay: inline;の指定をしてインライン風味に。
コレだけだと2番目のと同じなので、今回の目的である単語単位での折り返しを禁止させるようにするために、white-space: nowrap;の指定をしてみます。
そしたら、FirefoxはOKだったんすが、IE6/7が横一列に並んでしまったのでIE6/7はハックしてfloat指定したらいい感じに並んでくれました。
ただ、floatを指定すると親要素が高さを算出してくれませんので背景が見えません。
それを解決するには、widthの指定を親要素に当たるul要素にすることで解決。zoom: 1;でもいいんですが。
コレで以下のブラウザで大体おんなじ見た目になりました。
- Internet Explorer 6
- Internet Explorer 7
- Opera 9.5
- Safari 3
- Firefox 3
最初は、white-space: pre;とかでやってたらかなりはまってしまって大変な事になりかけましたが、無事意図した状態になって良かったです。はい。
ちなみに、サンプルのメインエリア下部にある見出しっぽいものの下は、半角英数字だけだとどうなるのか気になったので残ってますが、今回のエントリーとは関係はありません。いわゆるおまけです。
あ、最後に。