text-overflowプロパティ

値

次のような値を設定することができます。なお、このプロパティの適用を有効にするためにはoverflowプロパティ、white-spaceプロパティを同時に指定する必要があります。

• clip – テキストが途中であっても、コンテンツの表示領域を出た場合は切り取ります。初期値です。
• ellipsis – テキストが途中で切り取られた場合、省略記号を表示します。
• テキスト – ここで指定したテキストはコンテンツとして表示され、もし表示できない場合は切り取られます。2016年7月26日時点では、Firefoxのみ対応しています。

パターン1

上の値の指定例です。3つ目の任意文字はfirefoxのみ対応しており、それ以外のブラウザでは1つ目の「clip」と同じ結果が表示されます。

CSSコード例

.sample_css1 .text1 {
	overflow: hidden;
	width: 80%;
	height: 20px;
	white-space: nowrap;
	text-overflow: clip;
}
.sample_css1 .text2 {
	overflow: hidden;
	width: 80%;
	height: 20px;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.sample_css1 .text3 {
	overflow: hidden;
	width: 80%;
	height: 20px;
	white-space: nowrap;
	text-overflow: " -";
}

表示例：