Menü

CSS üç nokta text-overflow:ellipsis facebook paylaş CSS üç nokta text-overflow:ellipsis twitter paylaş CSS üç nokta text-overflow:ellipsis google plus paylaş CSS üç nokta text-overflow:ellipsis linkedin paylaş


CSS üç nokta text-overflow:ellipsis


css ile satıra sığmayan cümleler ve cümle sonuna üç nokta ataması ...

Bazen uzun uzun paragrafları yayınlarken bir kısmını göstermek için bazense çoklu tablolar da tüm satırları kısaltmak için sonuna üç nokta koyarız. Bu üç nokta yazının devamı var ama buraya sığdıramadım demektir :)

Gelelim bunu CSS ile nasıl yapacağımıza. Bu olayı javascript ile yapmanız veya bulmanız mümkün fakat CSS ile yapımını kimse anlatmamış. Biraz inceleme yaptım ve göremedim. Gelelim nasıl yapacağımıza:

CSS kodumuz:

.ucnokta
{
overflow: hidden;
width: 50;
text-overflow: ellipsis;
}

HTML bölümü:

<div class="ucnokta"><nobr>Kısaltılacak olan yazı bu kısımda yazıyor</nobr></div>

İşte yapmak bu kadar basit. <nobr> kodunu CSS içinden de çağırabilirsiniz. Tek kötü yanı firefox un desteklememesi fakat google da aratırsanız firefox için yazılmış bir JS bulaiblirsiniz.

Görünüşü ise şu şekilde olacak:

Kısaltı...

Kolay gelsin...





[ YORUM YAZ ] [ YAZDIR ]
Anahtar kelimeler: 

Yazan: Haldun
Yorum: ooo Süper bir paylaşım yapmışsın bunun için baya uğraşan arakdaşlarımı biliyorum. Teşekkürler. Peki firefox da nasıl? çalışıyormu?
Yazan: Aybar DUMLU
Yorum: Haldun firefox da çalışmıyor. Sadece internet explorer yiyor. Fakat ufak bir javascript ile firefoxda da halledilebilir. Eğer yapamazsan javascript kodunu da verebilirim. Kolay gelsin.
Yazan: HAKAN HAKKI
Yorum: BEŞ PARA ETMEZ.. VERDIGIN ORNEK STATIK..... AJ.. AJ.. AJEY.. HEY YAVRUM HEY.. TÜRKE BAK İNGİLİZCE YORUM.. VAY BE KADIR..
Yazan: AYBAR DUMLU
Yorum: Merhaba Hakan; Eğer yapamadıysan, istediğin programlama dilinde dinamik olarak da yardımcı olmaya çalışırım.