様々な表示環境に対応しようと思うと、閲覧者のウインドウ幅によっては、指定したボックス内に文字が入り切らなくなる場合も考えなければなりません。比較的複雑なレイアウトを組んでいるとき、ボックスからあふれる文字を2行目に改行して表示させたくない場合もあります。そこが、ほとんどデザインのためだけに用意されたボックスであり、必ずしも読める必要がない場合は、「はみ出る部分の文字は省略してしまう」ことも対処法の1つです。

指定したサイズ内に収まらない場合に、はみ出る文字列を省略する（消す）には、overflowプロパティが使えます。overflowプロパティは、「はみ出る文字列」をどう表示するかを指定するためのプロパティです。以下のように記述します。

div.head {
   overflow: hidden;
}

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

これを使って表示させた例は、以下の通り。

上記の3つのボックスには、「オーバーフローする部分を省略するデザイン」という文字列が書かれています。ボックスのサイズは、それぞれ「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; /* 高さの制限 */
}

横幅を割合で、高さを文字数で指定していますが、もっと厳密にピクセル数で指定してももちろん構いません。1文字の高さよりもボックスの高さが小さい場合、1文字も表示されない可能性もあります。1文字の大きさは、（何も指定しなければ）ユーザのブラウザの設定に依存する点に注意しましょう。

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

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