cssプロパティtext-overflowの説明

こんにちは tanaka です。

今回は、
cssプロパティ
text-overflow の説明です。

text-overflowは、
 ・overflow: hidden;
 ・white-space: nowrap;
を使って文章が右にはみ出ている時、

そのはみ出た部分をどうするか決める
プロパティです。


text-overflowは、
overflow white-spaceを使って
文章が右にはみ出て
初めて使えるプロパティなので

使う場面は限られるでしょう。

それでは、
詳しく説明していきます。

<コピーペーストについて>

コードをコピーする際は
灰色で四角く囲まれた所を使用してください。

<i class="fas fa-check-circle"></i>
スポンサーリンク

text-overflowの説明

text-overflowとは

text-overflowは、
 ・overflow: hidden;
 ・white-space: nowrap;
を使って文章が右にはみ出ている時、

そのはみ出た部分をどうするか決める
プロパティです。

text-overflowの値は2つ

値は2つ
1:text-overflow: clip   = はみ出た以降は消す
2:text-overflow: ellipsis = はみ出た所に印を入れる

text-overflow: clip;
text-overflow: ellipsis;
1:text-overflow: clip

はみ出た以降は消してしまいます。

画像blog-text-overflow01
text-overflow: clip;
2:text-overflow: ellipsis

はみ出た所に印を入れる。

画像blog-text-overflow02
text-overflow: ellipsis;

まとめ

text-overflowとは

text-overflowは、
 ・overflow: hidden;
 ・white-space: nowrap;
を使って文章が右にはみ出ている時、

そのはみ出た部分をどうするか決める
プロパティです。

text-overflowの値は2つ

値は2つ

1:text-overflow: clip   = はみ出た以降は消す

画像blog-text-overflow01

2:text-overflow: ellipsis = はみ出た所に印を入れる

画像blog-text-overflow02
text-overflow: clip;
text-overflow: ellipsis;

以上、
text-overflow
の話でした。

ありがとうございました。

タイトルとURLをコピーしました