1行に収まらないテキストの末尾を三点リーダー「…」記号で自動省略するCSSがある

特定のボックス内などで表示領域を制限するにはoverflowプロパティが使えます。例えば、overflowプロパティの値に「hidden」を指定すると、指定領域からはみ出る内容はすべて表示が省略されて非表示になります。しかし、そのままでは「表示が省略されたテキストが存在するかどうか」が閲覧者には分かりません。

そのような場合に「省略された部分があるよ」という事実を、三点リーダー「…」記号などを使って自動で示せると便利です。
それを可能にするのが、text-overflowプロパティです。

1行に入りきらずに省略されたテキストの末尾に「…」記号を自動付加できるtext-overflowプロパティ

text-overflowプロパティを使うと、表示領域の制限されたボックスからはみ出てしまうテキストがある場合には、テキストの末尾に三点リーダ「…」記号が自動的に付けられます。このtext-overflowプロパティを使えば、後続の文章が省略されているという事実が視覚的によく分かるようになります。
サムネイルで画像をたくさん並べている場合に表示する画像キャプションなどのように、

• 複数行に折り返して表示されたくはない。でも、表示領域の限界までは表示したい。
• 無理に全部表示するよりも、概要や雰囲気だけを見せられれば良い。

といった場合に役立ちそうです。

text-overflowプロパティの書き方は簡単です。表示領域からあふれてしまうテキストの末尾を三点リーダー「…」で自動省略したい場合は、以下のように記述します。

text-overflow: ellipsis;

値に指定している「ellipsis」は「省略記号」という意味で、実際には …(…) が付加されます。
表示領域よりもテキストの方が短くて、何も省略されない場合には、三点リーダー記号は表示されません。あくまでも、「あふれてしまう場合」に限って三点リーダー記号が表示されます。

text-overflowプロパティを使って省略記号を表示できる前提条件と、表示サンプル

なお、text-overflowプロパティを適用するには、以下の2つの条件を同時に満たす必要があります。

1. overflowプロパティを使って表示領域(面積)が制限されている必要があります。つまり、overflowプロパティに「hidden」など(「visible」以外の値)が指定されていることが必須です。
2. 改行が禁止されていて1行で表示される必要があります。例えば、white-spaceプロパティに値「nowrap」を指定している場合や、途中に空白を含まない長い英単語が書かれている場合など。

また、古いIE6では横幅(width)も指定されている必要がありましたが、もはやそこまで古いブラウザを気にする必要はないでしょう。
例えば、以下のようにして使います。

p.sample {
   /* ▼ボックスの表示面積の制限 */
   width: 70%;
   overflow: hidden;
   border: 1px solid gray; /* (装飾用の枠) */
   
   /* ▼改行を禁止した上で、はみ出る分量は「…」記号で省略 */
   text-overflow: ellipsis;
   white-space: nowrap;
}

上記のCSSソースを使って適当な文章を表示すると、以下のように見えます。

ブラウザのウインドウサイズ(横幅)を様々に変化させて、表示を確認してみて下さい。
上記では、ボックスの横幅を割合(70%)で指定してあります。なので、ブラウザのウインドウ幅を変化させてみると表示される文章量も変化します。ボックスのサイズがどのような場合でも、(テキストが収まりきらない場合には)末尾に「…」記号が付加され、1行を越える分量はすべて省略されていることが分かります。

自動表示する省略記号は、三点リーダー「…」記号以外の文字列にもできる (CSSの文法上は)

このtext-overflowプロパティの値には、上記で指定した「ellipsis」以外にも引用符で囲むことで任意の文字列を指定できます。
例えば以下のように記述すると、はみ出る分量がある場合には、三点リーダ－「…」ではなく、指定した文字列「～」で省略されます。

text-overflow: "～";

また、ここで指定する文字は1文字に限らないので、以下のように3文字を指定することもできます。下記のように書くと、テキストが収まりきらない場合にだけ、末尾に「(略)」という表示が自動的に付加されます。

text-overflow: "(略)";

ただし、残念ながら本稿執筆時点では上記のように任意の省略文字列を指定して意図通りに表示可能なブラウザはFirefoxだけでした。

しかし、値に「ellipsis」を指定して三点リーダー記号「…」を表示させる方法なら、IEも含めて代表的なブラウザではすべてでサポートされています。ですから、基本的には「三点リーダー記号を表示させて自動省略を示せるCSSだ」と解釈しておくのが良さそうです。

自動付加される省略記号を三点リーダー以外にしてみた場合の表示例

表示サンプルは以下の通りです。対応済みブラウザ(Firefox)で見ると、文章の末尾が「～」記号で省略されていることがわかります。実装されていないブラウザでは、省略記号は表示されません。

このtext-overflowプロパティはCSS3で新しく用意されたプロパティではありますが、IEでは以前から独自拡張として実装されていたため、わりと古いバージョンでも使えます。(IE6でも使用可能です。)

ボックスの表示領域を1行に制限した上で、その範囲内に文章を「入るだけ掲載して、あとは省略する」といったデザインを作りたい場合に活用して下さい。特にスクリプトを使うことなくスタイルシートだけで実現できるので手軽です。

(更新日：2017年07月02日)