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

投稿日: / 更新日:

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

サンプルコード

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

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

デモ

text-overflowellipsisを指定したデモです。表示領域を超えた部分がとなっています。折り返しが効く日本語などの場合は機能しないのも確認しておきましょう。overflowscrollを指定しても機能しますが、スクロールした時に不自然な表示になるので非推奨です。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月