【CSS】意外と知られていない[text-overflow:ellipsis;]の使い方。

Ads by Google

CSSの「text-overflow」は、テキストが領域からはみ出ている場合の処理を指定するプロパティです。

表示する文字が多かった場合、省略したことを表すために「...」と表示することが多々ありますが、これがCSSだけで可能になるんです。
…ご存知でしたか?

「text-overflow」には2つの値、「clip」と「eclips」が定義されていています。
意味はそれぞれ以下の通り。

  • text-overflow:clip; → デフォルトの値で、省略符号は表示しません。
  • text-overflow:eclips; → テキストが表示領域を越えた場合に省略符号「…」を表示します。

通常、システムコードなどでは文字数を指定して「…」を表示しますが、CSSでは幅を指定して、その領域よりもはみ出た場合に省略記号「…」を表示することになります。

具体的な text-overflow:ellipsis; の記述例

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

改行をしない white-space:nowrap; を併用して記述しないといけないため、表示できるのは1行目のみとなり、1行目の最後に省略記号「…」がつくことになります。
複数行で使用したい場合は javascript を使うなどの工夫が必要ですね。

こちらの記事もいかがですか?

アナタにオススメ!
同じカテゴリーの他の記事です。

Ads by Google

Leave a Replyコメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です