備忘録的プログラミングリファレンス

text-overflowプロパティ

 text-overflowプロパティは、エレメントからテキストがはみ出る(オーバーフローする)ときに、どのように表示するかを指定するプロパティです。
 はみ出る分は表示しない(clip)、省略記号"…"、カスタム文字列が指定できます。

 テキストがオーバーフローする状態とは、テキストの自動折り返しが発生するような場合です。

 text-overflowプロパティが機能するには、折り返しさせない、はみ出る部分は省略するといった、white-space:nowrap;overflow:hidden;の設定が必要です。

エレメントに入りきらない場合は省略記号"…"で表示(Exampleの参照
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

関連プロパティ

 以下はテキスト配置に関連するプロパティです。

letter-spacing文字間隔
line-heightテキストの行間
overflow-wrap単語がエレメント内に入りきらない場合の設定
tab-sizeタブのサイズ
text-align右寄せ、中央寄せ、左寄せ
text-align-last最後の行の右寄せ、中央寄せ、左寄せ
text-combine-upright縦書きにおける算用数字(アラビア数字)の配置
text-indent最初の行頭の字下げ幅
text-justify両端揃えにおける単語、文字の間隔
vertical-alignテキストの上下位置、上付き、下付き
white-spaceホワイトスペース(複数の半角スペース、タブ)や改行の表示方法
word-breakエレメントの領域をはみ出るテキストの折り返し
word-spacing単語と単語の間の空白を調整
word-wrapoverflow-wrapプロパティの別名

構文(Syntax)

CSS

text-overflow: clip | ellipsis | string | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.textOverflow;
値の設定
object.style.textOverflow="clip | ellipsis | string | initial | inherit";

値(Values)

Value摘要
clip初期値(default値)、はみ出る分は非表示
ellipsis省略記号"…"に代替
string任意の文字列、"-"
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考(Remarks)

初期値(Default value)clip
継承(Inherited)No
CSS AnimationNo

Example

 text-overflowの例です。ここでは、文章の折り返しが必要な場合に、はみ出る部分は省略し”…”記号で代替えします。

 text-overflowプロパティが機能するには、white-space:nowrap;overflow:hidden;の設定が必要です。