Sample: { white-space :nowrap;｝

仮設ページの表示内容の変更の際の備忘録として記録。

紙媒体で時々使われている方法ではあるけど、ウェブページだとスペースがあったり日本語の場合、指定された幅の中で改行されてしまうので、それを好まない人にとってはネックとなります。

というのも、以前そういったリンク集を制作してもらいたいという依頼があって、ただ li { display: inline; } と定義したら「改行されないようにして欲しい」と苦情が来たことがあり、結局どうすればいいのか分からかったことがあったため、そういった依頼に対応できるようにしたかった思いもあります。

ウェブページの場合、論理構造も考える必要があるため、ただ単に単語を羅列して強制改行したところで、文字の大きさを変更した途端にして欲しくない改行が意図も簡単にされてしまうので、紙媒体のように楽ではないです。

CSSで定義する

floatで回り込ませたり、半角スペースを   に置き換えたりと色々試してみたけど、CSSで定義する方法が一番簡単で手っ取り早いです。

コーディングの際にインライン要素を内包して、そのインライン要素に対して以下のように定義すると空白などでの改行が禁止されます。

li {
list-style: inline;
margin-right: 20px;
}
li a,
li span {
white-space: nowrap;
}

視覚的効果を望む人にとっては、こういった方法があると便利かと思います。

あとサンプルを置いておきますので、各種ブラウザで文字の大きさを変更して閲覧してみると良いです。

Sample: { white-space :nowrap;｝

この方法の欠点

IE7だと、ズームした際に、マージンが適用されないトラブルが……

他のブラウザだと問題ないのですが、なぜかIE7だけそういった事態になるのが問題といえば問題。かといってIE使っている人で文字の大きさの変更やズーム機能を積極的に使っているかというとそうとも思えないですが。

hasLayoutプロパティの入れ忘れでした。