はみ出したテキストを「…」で省略する
text-overflowプロパティにて、
指定した領域よりテキストがはみ出した場合に「…」で省略することができます。
まずは指定する前のテキスト。
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
こちらの文章に省略の指定をしてみます。
.over1 { text-overflow:ellipsis; white-space:nowrap; overflow:hidden; width:300px; color:#483D8B; }
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
「…」を表示させない場合は以下のようにtext-overflow:clip;とします。
.over2 { text-overflow:clip; white-space:nowrap; overflow:hidden; width:300px; color:#483D8B; }
この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。
なおfirefoxではtext-overflowに対応していないので、使用する際は注意が必要です。