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

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

1行に入りきらないテキストの末尾を三点リーダー「…」記号で自動省略する方法 [CSS3,テキスト,ボックス]

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

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

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

text-overflowプロパティを使うと、表示領域の制限されたボックスからはみ出てしまうテキストには、末尾に三点リーダ「…」記号が付けられます。このtext-overflowプロパティを使えば、文章の後半が省略されている事実が視覚的によく分かります。
「文章を全部表示する」よりも「概要や雰囲気だけを見せられれば良い」といった場合に役立ちそうです。

text-overflowプロパティの書き方は簡単です。あふれる末尾を三点リーダー「…」にしたい場合は、以下のように記述します。

text-overflow: ellipsis;

ただし、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ソースを使って適当な文章を表示すると、以下のように見えます。

▼text-overflowプロパティを使った場合。(=表示領域の端に三点リーダーが表示される)

ここには(おそらく)1行を超過する長い文章が掲載されています。このような長い文章を、そのまま全部見せるのではなく、指定範囲内に「入るだけ入れて、あとは省略する」といったデザインが、特にスクリプトなどを使うことなくスタイルシートだけで実現できます。

▼使わない(ただ表示面積を制限しただけの)場合。(=表示領域の端には何も表示されない)

ここには(おそらく)1行を超過する長い文章が掲載されています。このような長い文章を、そのまま全部見せるのではなく、指定範囲内に「入るだけ入れて、あとは省略する」といったデザインが、特にスクリプトなどを使うことなくスタイルシートだけで実現できます。

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

仕様上は、表示する省略記号を三点リーダー「…」以外の文字にもできる

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

text-overflow: "~~";

ただし、本稿執筆時点では上記のように任意の省略文字列を指定して意図通りに表示可能なブラウザはFirefoxだけでした。まだ仕様が確定していないので、各ブラウザのサポート状況は揃っていないようです。ただし、値に「ellipsis」を指定して三点リーダーを表示させる方法であれば、代表的なブラウザではすべてでサポートされています。

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

ここには(おそらく)1行を超過する長い文章が掲載されています。このような長い文章を、そのまま全部見せるのではなく、指定範囲内に「入るだけ入れて、あとは省略する」といったデザインが、特にスクリプトなどを使うことなくスタイルシートだけで実現できます。

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

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

《2016/03/13 11:31 改訂》
《2014年6月6日 11:04 初版公開》

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

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

▲各カテゴリ毎に、TIPSのタイトルと概要を一覧できます。ぜひ、いろいろ覗いてみて下さい!

著者紹介


にしし(西村文宏)

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

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

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

著書一覧と詳細

関連書籍など

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