このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

text-overflow”プロパティ:省略記号CSS3で追加

記事Jun. 4th,2021
要素の領域に収まらずはみ出して表示されないテキストに省略記号を付けるプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 text-overflow: clip;
適用対象 ブロック・コンテナ
継承 No
パーセント値 パーセント値は指定できません
計算値 指定した値(ただし、長さは絶対長)
アニメーション 計算値

text-overflow”プロパティは要素の領域に収まりきらずインライン方向、横書きの場合は水平方向、縦書きの場合は垂直方向へはみ出してしまい、表示されないテキストなどのインライン・コンテンツの処理方法を指定するプロパティです。

テキストはwhite-space”プロパティなどにより折り返しが禁止されていたり、一単語がとても長い場合に内包される要素のコンテンツ・ボックスからあふれてしまいます。“text-overflow”プロパティはoverflow”プロパティoverflow-inline”プロパティoverflow-x”プロパティoverflow-y”プロパティの値が“hidden”以外である場合にあふれ出て表示されないコンテンツの切り取り方を指定することができます。

テキストがあふれ出て省略された時に省略記号(“…”)やあらかじめ指定した文字列を自動的に付与できます。

省略記号はレイアウトやポインタ・イベントには影響を与えません。省略記号に対するポインタ・イベントは省略記号がない場合と同様に扱われます。

テキストを選択した時、省略記号を選択すると省略されたテキストが選択されます。コピー・ペーストした時には表示された省略記号ではなく省略されたテキストがペーストされます。

サンプルコード

div { text-overflow: ellipsis;}

説明
clip あふれるコンテンツは切り取られます (文字の途中で切り取られる場合があります。)
ellipsis 切り取られるコンテンツを表すために省略記号(“”、U+2026)を描画します (使用されている記述言語や書体、書字方向により適した記号があったり、省略記号が使用できない場合は他の方法で代替される場合があります。省略記号までを行内に収めるのに必要であればより多くのコンテンツが切り取られます。また、その行が省略記号だけになる場合には省略記号を描画せずに切り取られます。)
<string>CSS Overflow Module Level 4 で追加 切り取られるコンテンツを表すために与えられた文字列を描画します (“ellipsis”の時と同様に与えられた<string>”値を行内に収めるのに必要であればより多くのコンテンツが切り取られます。)
fade(<length>)CSS Overflow Module Level 4 で追加 切り取られるコンテンツは行の端で完全に透明になるようにフェードアウトします (fade()”関数でフェード効果を適用する範囲を指定します。)
fade(<percentage>)CSS Overflow Module Level 4 で追加
fadeCSS Overflow Module Level 4 で追加 fade()”関数と同様ですが、フェード効果を適用する範囲はユーザー・エージェントが決めます (仕様書が推奨するフェード効果の長さは1emです。)
共通キーワード

値が“ellipsis”、<string>”値、“fade()”、“fade”である時、ユーザーがコンテンツにスクロール、選択もしくは編集などの操作を加えている時には“clip”として扱われる場合があります。

値の指定方法

値が1つの場合はその値は行末の処理方法を指定します。

div { text-overflow: 〚行末の処理方法〛;}

また、2つの値をホワイトスペースで区切って記述することができます。

1つ目の値は行の始端の処理方法を指定します。書字方向が左から右の横書きの場合は行の左端、書字方向が上から下の縦書きの場合は上端に適用されます。

2つ目の値は行の終端の処理方法を指定します。書字方向が左から右の横書きの場合は行の右端、書字方向が上から下の縦書きの場合は下端に適用されます。

div { text-overflow: 〚行の始端の処理方法〛 〚行の終端の処理方法〛;}

仕様書

定義されている仕様書
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 作業草稿(WD) 作業草稿(WD)
text-overflow
定義なし

定義なし

定義あり

定義あり
Level 1 Level 2 Level 3 Level 4
勧告(REC) 勧告(REC) 作業草稿(WD) 作業草稿(WD)
clip
定義なし

定義なし

定義あり

定義あり
ellipsis
定義なし

定義なし

定義あり

定義あり
<string>
定義なし

定義なし

定義なし

定義あり
fade()
定義なし

定義なし

定義なし

定義あり
fade
定義なし

定義なし

定義なし

定義あり

使用例

はみ出すテキストを切り取る

p {
white-space: nowrap;
overflow: hidden;
text-overflow: clip;
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

はみ出すテキストに省略記号を付ける

p {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p {
white-space: nowrap;
overflow: hidden;
text-overflow: '(略)';
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

はみ出すテキストをフェードアウトする

p {
white-space: nowrap;
overflow: hidden;
text-overflow: fade;
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p {
white-space: nowrap;
overflow: hidden;
text-overflow: fade(50%);
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

値を2つ指定する

p {
white-space: nowrap;
overflow: scroll;
text-overflow: ellipsis ellipsis;
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

p {
white-space: nowrap;
overflow: scroll;
text-overflow: ellipsis '(右へ続く)';
}

ナギコは「猫は上のかぎり黒くてことはみな白き」とも記していた。つまり彼女はおなかが白くて背中が黒い猫が一番良いと言っているのだ。これに対してAngelinaは「The Calico cat is the ultimate type of cat」だと言った。それにعَاتِكَةは「أنا أحب القطط البيضاء أكثر من غيرها」だと言う。しかし私は1000年以上も前にナギコが書き残した意見に賛同したい。

一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク