text-overflow

div.hoge{
	text-overflow: ellipsis;
	overflow: hidden; /* こちらも同時に指定する必要があります。 */
	white-space: nowrap; /* こちらも同時に指定する必要があります。 */
}

<div style="width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;">ここはdiv要素です。はみ出したテキストは省略され末尾に『…』が付きます。</div>

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

インライン要素で指定をしても『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>