はみ出したテキストを「…」で省略する

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に対応していないので、使用する際は注意が必要です。

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る