text-overflow - テキストが表示領域を超えた時のスタイルを指定する

投稿日: / 更新日:

スタイルシートのtext-overflowは、表示領域をテキストが超えた場合のスタイルを指定するためのプロパティです。

サンプルコード

text-overflowを指定したサンプルコードです。要素のoverflowにvisible以外を指定していないと機能しません。

p {
	overflow: hidden ;
	text-overflow: ellipsis ;
}

デモ

text-overflowにellipsisを指定したデモです。表示領域を超えた部分が…となっています。折り返しが効く日本語などの場合は機能しないのも確認しておきましょう。overflowにscrollを指定しても機能しますが、スクロールした時に不自然な表示になるので非推奨です。CSSを編集して、どのように変化するのかをお試し下さい。

値の指定

値の指定方法は主に下記の通りです。リンクをクリックするとデモを確認できます。

項目説明
inherit親要素の値を引き継ぐ。例の場合、div要素のtext-overflowには、bodyに指定された値(ellipsis)が引き継がれる。
initialプロパティの初期値が適用される。この場合、clipが適用される。
clip単純に表示領域を超えた部分が切り取られる。…とのことだが機能しているのか怪しい。例では、単にoverflow:hiddenの効果でテキストが見えなくなっているだけのように見える。
ellipsis表示領域を超える直前に…が付く。
string文字列を指定すると、表示領域を超える直前にその文字が付く。例では(ryを指定した。2016年2月現在、ChromeやSafariでは機能しない。

ブラウザのサポート

2016年7月現在の、ブラウザのサポート状況は次の通りです。

  • Chrome

    ●

    4+

    2010年3月

  • Firefox

    ●

    7+

    2011年9月

  • Safari

    ●

    3.1+

    2008年3月

  • Ie

    ●

    6+

    2001年8月

  • Edge

    ●

    12+

    2015年3月

  • Opera

    ●

    9+

    2006年1月

  • Safari(iOS)

    ●

    3.2+

    2009年6月

  • Ie Mobile

    ●

    10+

    2012年6月

  • Chrome

    ●

    47+

    2015年12月

  • Android

    ●

    2.1+

    2010年1月

  • FF Mobile

    ●

    44+

    2016年1月

  • Opera Mobile

    ▲

    12+

    2012年2月