text-overflow プロパティ
text-overflow プロパティは、エレメントからテキストがはみ出る(オーバーフローする)ときに、どのように表示するかを指定するプロパティです。
はみ出る分は表示しない(clip)、省略記号"…"、カスタム文字列が指定できます。
テキストがオーバーフローする状態とは、テキストの自動折り返しが発生するような場合です。
text-overflow プロパティが機能するには、折り返しさせない、はみ出る部分は省略するといった、white-space:nowrap;、overflow:hidden;の設定が必要です。
ページ内 Index
構文(Syntax)
CSS
DOM ( JavaScript )
値(Values)
Value | 摘要 |
---|---|
clip | 初期値(default値)、はみ出る分は非表示 |
ellipsis | 省略記号"…"に代替 |
string | 任意の文字列、"-" |
initial | 初期値に戻す |
inherit | 親エレメントのプロパティを継承 |
備考(Remarks)
初期値(Default value) | clip |
継承(Inherited) | No |
CSS Animation | No |
Example
text-overflow プロパティの例です。ここでは、文章の折り返しが必要な場合に、はみ出る部分は省略し”…”記号で代替えします。
text-overflow プロパティが機能するには、white-space:nowrap;、overflow:hidden;の設定が必要です。
関連 CSS プロパティ
以下はテキスト配置に関連するプロパティです。
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-wrap | overflow-wrapプロパティの別名 |