Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

CSSプロパティ辞典

text-overflow

はみ出したテキストを省略して末尾に『…』を表示させる事ができます。『text-overflow』だけでは、使用することできません。使用する際は『white-space:nowrap;』と『overflow』も一緒に使う必要があり、ブロック要素のテキストにしか適応されません。

サンプルコード
div.hoge{
	text-overflow: ellipsis;
	overflow: hidden; /* こちらも同時に指定する必要があります。 */
	white-space: nowrap; /* こちらも同時に指定する必要があります。 */
}
指定可能な値一覧
概要
clip省略符号『…』を表示しません。これが初期値です。
ellipsis省略符号『…』を表示する。
ブラウザでの表示結果
<div style="width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">ここはdiv要素です。はみ出したテキストは省略され末尾に『…』が付きます。</div>

対応ブラウザ
IE6 IE7 IE8 IE9 IE10 IE11 Safari Chrome Firefox Opera

iPhone Safari Android2系 標準ブラウザ Android4系 標準ブラウザ

概要

長いテキストを省略して末尾に『…』を表示させる事ができます。

インライン要素で指定をしても『overflow』が効かないので、すべてのテキストが表示されます。

<span style="width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">ここはspan要素です。インライン要素なのでテキストが省略されません。</span>

基本的には『overflow:hidden;』で指定する事が多いと思いますが、『overflow』の指定の仕方で表示の仕方が変わります。

『overflow:auto;』で指定すると『width』で指定している値分省略され、残りのテキスト分は何も表示しませんが、テキストの領域分スクロールされる様になります。

<div style="width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: auto;">ここはdiv要素です。テキストが長い為、…を表示して省略しています。</div>

overflow』でも解説がありますが、一般的なブラウザでは『auto』と指定した場合と『scroll』と指定した場合で表示方法に変化はないので、『text-overflow』でも同様に『overflow:auto』で指定した時と同じになります。

<div style="width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: scroll;">ここはdiv要素です。テキストが長い為、…を表示して省略しています。</div>

『text-overflow』とは違いますが、下記の方法で複数行のテキストにも省略し『…』を表示させることができます。

ChromeとsafariとAndroid標準ブラウザのwebkit系のブラウザのみですがJavaScriptを使わずに『-webkit-box-orient: vertical;』と『-webkit-line-clamp』を使用して複数行のテキストにも対応させる事ができます。PCでは、foxやIEが対応していないので、使うのが難しいですが、スマホではAndroidの標準ブラウザが対応してますので、使いやすいと思います。

div.hoge{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3; /* テキストを省略させ『…』を表示させる行数を指定 */
}
<div style="width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;overflow: hidden;">ここはdiv要素です。webkit系ブラウザでは複数行でもテキスト省略して…を表示できます。</div>

『-webkit-line-clamp』とは指定した行数の最後のテキストに『…』を表示させるプロパティです。使用するときは『-webkit-box-orient』で要素をフレキシブルボックスにしないと指定しても『…』は表示されず、『height』が指定されていない場合は『-webkit-line-clamp』で指定した行数で『…』が表示され、それ以降のテキストは表示されません。

しかし『height』が指定されていて、さらにその数値が『-webkit-line-clamp』で指定した行数よりテキストが表示できる領域が残っている場合は、指定した行数で『…』が入り、残りの表示できるエリアに残りのテキストが省略されることなく表示されます。なので、使用するときはきっちりと『height』の数値を決めるか、『height』を指定せず『-webkit-line-clamp』のみの指定にする必要があります。

<div style="width: 240px; height: 200px;display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden;">ここはdiv要素です。『-webkit-line-clamp』と『height』を同時指定した場合は、『-webkit-line-clamp』で指定した行数の最後に『『』…』が表示、余った領域があるならばそこにされ残りのテキストが表示されます。</div>

『-webkit-line-clamp』で指定した行数よりテキストが少なければテキストの最後の『…』の出力はされません。

<div style="width: 200px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 10;overflow: hidden;">ここはdiv要素です。指定した行数以上にテキストがない場合が省略されません。</div>

記事の間違いや著作権の侵害等ございましたらお手数ですがまでご連絡頂ければ幸いです。