"CSS Tips Factory" : Presented by Nishishi via WordPress.

自動改行を防ぐ [テキスト, テーブル]

基本的に、ブラウザは横スクロールバーを出さずに済むようにページを描画します。
つまり、ながーい文章があれば、ウインドウの端で自動的に改行します。

下方向(垂直方向)にはスクロールバーを出しますが、右方向(水平方向)にはできるだけスクロールバーを出しません。巨大な画像があるとか、横幅固定の大きなボックスがあるとか、そういう「どうしようもない」状況があって初めて、横スクロールバーを出します。
たぶん。

で、スタイルシートを使うと、この自動改行を防ぐことができます。
以下のように、white-spaceプロパティに値「nowrap」を指定すると、自動的には改行されなくなります。

h1 {
   white-space: nowrap;
}

上記の場合、h1要素(見出し)の中身は、勝手に改行されなくなります。

でも、そんなことしたいと思うことがほとんどなさそうな気がします。
この「自動改行を防ぎたい」と思うのは、表を作っているときだけじゃないでしょうかね?

特定のセル内での自動改行を防ぐ

表を作っているときには、この「自動改行を防ぎたい」と思うことがあります。
例えば、以下のような表を作ったときです。

主な使われ方 white-spaceプロパティの値に「nowrap」が指定されるのは、おそらく表(テーブル)のセルに対してであることが多いのではないでしょうか。このようにテーブル内に「見出しセル」と「中身セル」がある場合で、「中身セル」の内容が極端に多い場合、「見出しセル」側の文字列が中途半端に改行されてしまって、非常に読みにくくなってしまうことがあります。
防ぎたいよね? このように、「見出しセル」のある列(ここでは左端の列)の幅が極端に狭くなってしまうと、「見出し」の内容が読みにくくなってしまいます。まあ、どう描画されるかはブラウザによって異なるので、場合によっては何もしなくてもうまく描画してくれるブラウザもあるかも知れませんが。

どうでしょう?
上記の表では、「主な使われ方」とか「防ぎたいよね?」という見出し部分(※1)のセルが、中途半端に改行されてしまっている(※2)と思います。(たぶん)

※1:この文字列が見出しに適しているかどうかは置いといて。(^_^;)
※2:何が中途半端だと感じるかは人それぞれですが、この場合「見出し」内の文字列は一切改行して欲しくないです。私の場合は。その方が見やすそうに感じますし。

というわけで、ここでは、見出しの存在するセル(th要素)に対して、自動改行を防ぐようスタイルを記述するのが良さそうです。
例えば、以下のように。

table th {
   white-space: nowrap;
}

このスタイルシートを適用させて、先ほどの表を表示させてみると、以下のように見えます。

主な使われ方 white-spaceプロパティの値に「nowrap」が指定されるのは、おそらく表(テーブル)のセルに対してであることが多いのではないでしょうか。このようにテーブル内に「見出しセル」と「中身セル」がある場合で、「中身セル」の内容が極端に多い場合、「見出しセル」側の文字列が中途半端に改行されてしまって、非常に読みにくくなってしまうことがあります。
防ぎたいよね? このように、「見出しセル」のある列(ここでは左端の列)の幅が極端に狭くなったりしなければ、「見出し」の内容が読みにくくなることもないでしょう。まあ、どう描画されるかはブラウザによって異なるので、場合によっては何もしなくてもうまく描画してくれるブラウザもあるかも知れませんが。

すると、上記のように、見出しセル内の自動改行がなくなります。

※くどいようですが、何が「見やすい」と感じるかは人それぞれでしょうけどね。(^_^;)
※ウインドウ幅がかなり狭い場合や、見出しセルに含まれる文字数が多い場合は、このスタイルを使うと逆に見にくくなりそうですが…。閲覧者のウインドウ幅は予測できないので、その点はちょっと心配に思わなくもないです。見出しに含まれる文字が数文字であれば、良いんじゃないかと私は思ってます。

このCSS TIPSへのコメントはお気軽に! [コメントはまだありません。]

著者紹介

主要なカテゴリ

このCSS TIPSへのコメント・トラックバック

コメントはまだありません。

コメント投稿欄 このCSS TIPSに対するコメント投稿を歓迎します。

(必須)

(必須) ※公開されません

※公開(リンク)されます

コメント:

※投稿内容によってはフィルタによって保留扱いとなる場合があります。その場合は承認後に掲載されます。
※本文中にURLっぽい文字列を記述すると、投稿内容はスパム扱いとなって無視されてしまう場合がありますので書かないようご注意下さい。

トラックバック

このCSS TIPSへのトラックバックURLは以下の通りです。

※言及リンクがないトラックバックは拒否されますのでご注意下さい。また、文字コードはUTF-8でお送りいただける方が望ましいです。