CSS3「text-overflow」を使って、テキストが領域からオーバーフローしたとき、省略符号「…」をつけるテストです。通常、テキスト量が領域の幅を上回る場合、(1)のように折り返して表示されます。しかし、何らかの理由で表示領域の高さが制限され、かつスクロールバーを出したくない場合は「overflow: hidden;」で、オーバーフローを非表示にしてしまうことが考えられます。その際、テキストの切れ方によっては後に続くのかどうか分かりにくいことがあります。そのようなときに「text-overflow」プロパティを使うと、省略符号を自動で表示して、後に続くテキストがあることを明示的に知らせることができます。

「text-overflow: ellipsis;」で、省略符号「…」(U+2026、… )を表示
「text-overflow: clip;」で、省略符号非表示、になります。

サンプルは、(2)と(3)が高さ制限を想定し、(1)と同じテキストを折り返し無しにしたもので、(2)が省略符号無し、(3)が省略符号付きにしています。

(1) white-space: normal; overflow: auto;

幅500ピクセルの領域。長めのテキストを読込むと、オーバーフローしてしまうように設定。

(2) white-space: nowrap; overflow: hidden; text-overflow: clip;

幅500ピクセルの領域。長めのテキストを読込むと、オーバーフローしてしまうように設定。

(3) white-space: nowrap; overflow: hidden; text-overflow: ellipsis;

幅500ピクセルの領域。長めのテキストを読込むと、オーバーフローしてしまうように設定。

戻るボタン