CSS3: “text-overflow” alanına sığmayan metinler

CSS3: “text-overflow” alanına sığmayan metinler
61

Tasarımınızı yaparken sıkıntı çekebileceğiniz olaylardan birisi alanına sığmayan metinler olabiliyor css3 ile birlikte gelen text-overflow özelliği sayesinde alanına sığmayan metinlerin sonuna üç nokta koyabilirsiniz.

text-overflow: ellipsis

  • Alanın satır atlamaması için white-space: nowrap değerini kullanıyoruz demoda görüldüğü gibi yazı alandan taşıyor.
  • Taşan yazının gözükmemesi içinde overflow: hidden değerini kullanıp alandan taşan yazıyı gizliyoruz.
  • text-overflow: ellipsis değeri ile taşan alanın sonuna üç nokta ekliyoruz.

Kullanabileceğiniz diğer text-overflow değerleri

CSS Value Expected Result Live result Expected Result Live result
visible overflow 1234567890
1234567890
0987654321
1234567890
text-overflow: clip t-o_clip.png
123456
t-o_clip_rtl.png
1234567890
text-overflow: '' 12345
123456
54321
1234567890
text-overflow: ellipsis 1234…
1234567890
…4321
1234567890
text-overflow: '.' 1234.
1234567890
.4321
1234567890
text-overflow: clip clip 123456
1234567890
654321
1234567890
text-overflow: clip ellipsis 1234…
1234567890
6543…
1234567890
text-overflow: clip '.' 1234.
1234567890
6543.
1234567890
text-overflow: ellipsis clip …3456
1234567890
…4321
1234567890
text-overflow: ellipsis ellipsis …34…
1234567890
…43…
1234567890
text-overflow: ellipsis '.' …34.
1234567890
…43.
1234567890
text-overflow: ',' clip ,3456
1234567890
,4321
1234567890
text-overflow: ',' ellipsis ,34…
1234567890
,43…
1234567890
text-overflow: ',' '.' ,34.
1234567890
,53.

 

text-overflow

Yorum Yap