表示スペースが制限されているときに、文章のoverflowを隠し、残りがあることを示す三点リーダーの表示がよく使われます。この一連の動作は、JavaScriptやCSSで構築できますがやや手間がかかります。これが、css3では「text-overflow:ellipsis」の指定で簡単に作成できます。

指定例

#セレクタ名 {
    width: 100%;  /*　任意のサイズ　*/
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

サンプル（緑色ケイ囲み部分）は、文章のoverflowを隠し、「text-overflow:ellipsis」により、三点リーダーを表示しています。この文章部分をクリックすると、「:target疑似クラス」を使って文章表示部分の#overflow2のcssを書き換え、文章全体を表示します。また、下側の「overflowをかくして三点リーダーを付ける」をクリックすると、ふたたび「:target疑似クラス」を使ってcssを書き換え、元に戻します。

サンプル

サンプルのhtmlソース

<div id="wrapper">
    <a style="text-decoration:none" href="#overflow2">
        <div id="overflow2"> [ダミーテキスト]吾輩は猫である。 <中略> ここで始めて人間というものを見た。
        </div>
    </a>
    <p><a href="#wrapper">overflowをかくして三点リーダーを付ける</a></p>
</div>

サンプルのCSSソース

#wrapper {
	width: 750px;
	margin: 0 auto;
	box-sizing: border-box;
	}
#overflow2 {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding: 12px 15px 10px 15px; 
	border: 1px solid #080;
	color: #000;	
	}
#overflow2:target {
	overflow: inline;
	white-space: normal;
	}
#wrapper:target #overflow2 {
	overflow: hidden;
	white-space: nowrap;
	}