にしし ふぁくとりー(西村文宏 個人サイト)

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

自動改行を防ぐ(勝手に改行させない)CSSの書き方 [テーブル,テキスト]

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

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

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

h1 {
   white-space: nowrap;
}

上記の場合、h1要素(見出し)の中身は、勝手に改行されなくなります。
このように「自動改行をさせたくない」と思うケースは、表(テーブル)を作っているときが多そうに思います。

特定のセル内でだけ、自動改行をさせたくない

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

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

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

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

特定のセルを自動改行させないスタイルシート

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

th {
   white-space: nowrap;
}

見出しセルを構成している「th要素」に対して、white-spaceプロパティに値「nowrap」を指定しています。
このスタイルシートを適用させて、先ほどの表を表示させてみると、以下のように見えます。

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

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

もっとも、閲覧者の使っているウインドウ幅がかなり狭い場合や、見出しセルに含まれる文字数がとても多い場合には、このスタイルを使うと逆に見にくくなりそうですが。見出しセルに含まれる文字がほんの数文字程度であれば問題にはならないでしょう。

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---