表示領域の制御（1行に対する文章の省略） text overflow

表示領域の制御について

1行の文章で要素より超えたテキストを非表示にして省略記号または任意の文字列を代わりに表示する場合は、text-overflowプロパティを使用します。

• ※ text-overflowプロパティを使用する場合は、overflow:hiddenとwhite-space:nowrapを指定しておく必要があります。

【構文】

							text-overflow:キーワード;
							または
							text-overflow:"文字列";
							または
							text-overflow:"左端の文字列" "右端の文字列";
							または
							text-overflow:左端のキーワード 右端のキーワード;
						

指定可能な値

値	説明	初期値
clip	なし	○
ellipsis	三点リーダー	-
文字列	指定された任意の文字列を表示	-

サンプル

div.sample1, div.sample2 { overflow:hidden; white-space:nowrap; } div.sample1 { -o-text-overflow:ellipsis; text-overflow:ellipsis; } div.sample2 { -o-text-overflow:"***"; text-overflow:"***"; }

指定方向

directionプロパティを指定することで、左か右かの方向を指定できます。

サンプル

div.sample3 { -o-text-overflow:ellipsis; text-overflow:ellipsis; /* 左から（初期値） */ -o-direction:ltr; direction:ltr; } div.sample4 { -o-text-overflow:ellipsis; text-overflow:ellipsis; /* 右から（初期値） */ -o-direction:rtl; direction:rtl; }