はみ出したテキストを「…」で省略する
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に対応していないので、使用する際は注意が必要です。
