閲覧者の画面(ウインドウ)幅によっては、ボックス内に文字が入り切らなくなる場合もよくあります。一般的な文章なら単に自動改行させて複数行で表示させれば良いでしょうが、場合によっては「ボックスからあふれる文字を2行目に改行して表示させたくない」というケースもあります。例えば、ほとんどデザインのためだけに用意されたボックスであり、必ずしも全文を読めるようにしておく必要がない場合などです。その場合は、「はみ出る部分の文字は切り捨ててしまう(＝非表示にする)」ことも対処法の1つでしょう。

指定領域外に出てしまう部分を非表示にできるoverflowプロパティ

指定したサイズ内に収まらない場合に、はみ出る文字列を切り捨てる(＝見えなくする)には、overflowプロパティが使えます。overflowプロパティは「描画領域からはみ出るコンテンツ(文字や絵やその他のボックスなどのあらゆる要素)」をどう表示するかを指定するプロパティです。例えば、以下のように記述します。

div.head {
   overflow: hidden;
}

overflowプロパティに値「hidden」を指定すると、指定領域からはみ出るコンテンツを非表示にします。これによって、文字列が自動改行されて複雑なレイアウトが崩れてしまうのを防ぐことができます。
ただし、はみ出た文字列は読めなくなるため、「必ずしも読める必要のない」箇所にだけ使うようにする必要があります。「読めないと困る」箇所に対しては使えません。

このoverflowプロパティを使って表示させた例は、以下の通りです。

上記の3つのボックスには、「はみ出す部分は非表示に！ オーバーフローする部分を切り捨てるCSS」という文字列が書かれています。ボックスのサイズは、それぞれ上から順に「20%」・「40%」・「60%」と指定してあるため、すべて表示されるかどうかは、閲覧者のウインドウ幅によって異なります。(ウインドウ幅が非常に広い場合は、3つとも省略されることなくフルに表示されるでしょう。ウインドウ幅を広げたり狭めたりしてみると、幅に応じて読める範囲が変化することを確認できるはずです。)

上記サンプルのスタイルシートソースは、以下のような感じです。

p.sampleheader {
   overflow: hidden; /* はみ出る部分を非表示に */
   background-color: #0000cc;
   color: white;
   margin: 0.3em 0px;
   padding: 0.3em;
   font-size: 120%;
   font-weight: bold;
   width: 20%; /* 横幅の制限 */
   height: 1.25em; /* 高さの制限 */
}

あるボックスを、デザイン目的で(例えばちょっとアクセントを加えるだけのサブ見出しのような感じで)使う場合に活用できると思います。省略されてしまった箇所を読む方法がないため、文章を読ませるためのボックスには使えませんが。

省略されてしまった箇所をスクロールすることで読めるようにするには、値に「hidden」ではなく「auto」や「scroll」を指定します。すると、ボックス内にスクロールバーが表示されて、スクロール可能になります。

備考：テキストに限定して、省略された事実を示す記号を自動付加できるCSSもある

なお、上記で解説したoverflowプロパティは、文字列に限らず画像でもフォームでも何に対しても有効です。その代わり、「表示幅が狭すぎて見えなくなっている」のか「本当に書かれていない」のかが区別できません。
「省略されている事実」を視覚的に伝えられるよう、「文字列が省略されている場合には末尾に三点リーダーなどの『…』記号を付加する」というスタイルシートもあります。それはtext-overflowプロパティです。そのtext-overflowプロパティについては、別途「1行に入りきらないテキストの末尾を(改行せず)「…」記号で自動省略する方法」記事で解説しています。

(更新日：2016年01月20日)