Nasıl Yapılır?

Css İle Uzun Kelimelerin Sonuna 3 Nokta Koymak

Css 3’ün gelmesi ile beraber bir çok alanda basitlik yaşandı. Bunlardan bir tanesi de uzun cümlelerin belirli yerden kesilip devamına 3 nokta koyulması.

Daha önceleri çok da kolay olmayan şekillerde uzun cümleleri asp ya da php gibi internet programlama dilleri ile lüzumlu yerlerinden kesilmekteydi. Şimdi Css 3 ile cümlelerimizi kesmeden lüzumlu yerde cümleyi durdurup, cümlenin devamına 3 nokta koyabiliyoruz.

Örnek Css Kodu:

Örnek CSS Kodu

.kutu { max-width:200px; padding:10px; display:block; background-color:#ddd; overflow:hidden; white-space:nowrap; text-overflow: ellipsis; }

Açıklama: Maximum genişliği 200 px olan bir css sınıfı oluşturduk. Ve oluşturduğumuz sınıfta ki fazla metni kesip yerine 3 nokta koyması için text-overflow: ellipsis; kodunu kullandık.

Dikkat edilmesi gereken nokta: overflow:hidden; white-space:nowrap; text-overflow: ellipsis; kodlarınmızın sınıfımızda bulunmasıdır. Bu şekilde oluşturduğumuz sınıfın dışına çıkan metinler otomatik olarak kesilir ve kesildiği yere 3 nokta eklenir.

Daha fazla göster

İlgili Makaleler

Close
Close