Css ile Taşan Yazıları Kısaltma ve Sonuna Üç Nokta Koyma

Web yazılım ile uğraşan arkadaşlarımızın çoğunun takıldığı bir problemdir. Özellikle Web sitemizin ana sayfasında yayınladığımız başlıkların div’e sığmaması büyük problemdir ve bu problemi Css ile kolay bir şekilde çözüme ulaştırabiliriz.

Yazının uzunluğu belirli olamayacağı için belli bir karaktere izin verip sonuna üç nokta koydurma kodunu sizlere anlatmak istiyorum.

<div class="uzun"> Burada uzun bir yazı olduğunu varsayalım... </div>

 

.uzun{
width: 150px;     /* Gösterilecek Uzunluk */
overflow: hidden; /* taşanları gizle */
white-space: nowrap; /* alt satıra inme */
text-overflow: ellipsis; /* eğer uzunsa üç nokta koy */
}

 

<!-- Yazımızı 150px Boyutunda Kısaltacak -->
<!-- Sonuna üç nokta koyacaktır -->

<!-- Örnek: -->

Burada uzun bir yazı olduğu...