css'de yazıyı sınırlandırmak

1 Mart 2015 Pazar, 16:56 sularında İzni Burak Demirtaş tarafından #web konularında yazılmış.
Yazıldığından bu yana, 18242 kez okunmuş ve 3 yorum almış.

Sitelerimizde içerik yayınlarken bazen içeriğin belli bir kısmını yazıp, sonuna üç nokta koymamız gerekebiliyor. Daha sonrasında devamı için tıklayın, tamamını oku gibi linkler verebiliyoruz. Bu işlemi yaparken genellikle back-end kısmında yapıyorduk. Gelen veriyi belli bir karaktere kadar sınırlayıp, sonuna üç nokta ekliyoruz. Fakat bunun css ile çok daha kolay ve kullanışlı bir yolu var. Aynı zamanda yazılan metni kesmek zorunda kalmadığınız için seo açısından da faydalı bir durum oluyor. Çok uzatmadan nasıl yapabileceğimize bir bakalım.

Bu konuda bize yardımcı olacak css özelliği text-overflow. Aynı zamanda bu işlemi daha düzenli bir şekilde yapmak için css'in overflow ve white-scape özelliklerinden de yararlanacağız. Bir örnekle inceleyelim.

Burada görüleceği gibi ilk div kullanımımızda veri aynen yazıldı. Herhangi bir sınır koyamadık. Fakat ikinci kullanımımızda oluşturduğumuz div'e three-dot class'ını atayarak istediğimiz sonucu elde ettik. Böylece back-end kısmında herhangi bir zahmete girmeden yazımızı sınırlandırmış ve sonuna üç nokta eklemiş olduk.

Sonuç olarak bu işlemi yapan tam kodlarımıza bakacak olursak;

div {
 width: 100px; 
 overflow: hidden; /* taşacak kısımları gizle. */
 white-space: nowrap; /* alt satırı gösterme, alt satıra inme. */
 text-overflow: ellipsis; /* uzunsa sonuna üç nokta koy. */ 
}

Bu kısımda width özelliğinin değerini ne kadar fazla verirsek, içeriğimizde o kadar fazla görünür. Değiştirip test edebilirsiniz. text-overflow özelliği hakkında biraz daha bilgi almak ve alternatif kullanımları görmek için css-tricks'den veya w3schools'dan faydalanabilirsiniz. Soru veya önerilerinizi yorum olarak yazabilirsiniz.

Kolay gelsin!


Yorumunu Gönder     Sende görüşünü yaz!

3 adet yorum yapılmış.   Sende yap!

yunus emre demiş ki; 1 Mart 2015 Pazar, 18:16
beğen butonu nerde bu sitenin arkadaş :D
İzni Burak Demirtaş demiş ki; 1 Mart 2015 Pazar, 22:46
@yunus; gerek görmemiştim ama; harbiden onu iyi dedin abi, ekleyim. :)
duyarli bir vatandas demiş ki; 18 Nisan 2019 Perşembe, 20:54
calismadi

PHP 8'e Hızlı Bakış

Merhabalar. PHP 8 ile birlikte hayatımıza neler gelecek, neler değişecek birlikte göz atmaya var mısınız? Haydi başlayalım o zaman…
...

15 Haziran 2020, 17:55   —   #php   —   Yorum yok.   —   Devamını Oku »

Selamlar. Ramazan ayının ve sahuru beklemek bahanesiyle gece geç saatlere kadar takılmanın vermiş olduğu yetkiye dayanarak yine bazı projeler üzerine çalışıyor, bazı araştırmalar yapıyor ve müzik dinliyordum. Ve birden "uzun zamandır bir şeyler karalamıyorum ben ya" diye bir düşünce geçti beynimin derinliklerinden. Hemen buraya geldim....

11 Mayıs 2020, 03:05   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »

React Hooks: useState - useLayoutState

React’in 16.8 versiyonu ile birlikte hayatımıza Hook kavramı girdi. Artık çok daha az kod ile daha efektif React Componentleri yazabiliyoruz. Hooks konusu ile ilgili detaylı bilgiyi React’in kendi dokümantasyonundan okuyabilir, bilgi sahibi olabilirsiniz....

18 Şubat 2020, 14:00   —   #web   —   1 yorum var.   —   Devamını Oku »

PHP 7.4'e Hızlı Bakış

PHP 7.4 ile birlikte hayatımıza girecek olan özelliklere şöyle hızlıca bir bakış atmaya ne dersiniz?
...

5 Eylül 2019, 11:31   —   #php   —   Yorum yok.   —   Devamını Oku »

React ile High Order Component (HOC) kullanımı

React ile High Order Component kavramını sizlere anlatmaya çalışacağım....

17 Ağustos 2019, 11:46   —   #web   —   Yorum yok.   —   Devamını Oku »

Selamlar, oldukça uzun bir zaman sonra tekrar buralardayım. Dolu dolu geldim ama; biraz oturun, konuşalım....

16 Şubat 2019, 22:23   —   #genel   —   Yorum yok.   —   Devamını Oku »

Yine aylar olmuş ve buralarda gözükmüyorum. Ne zaman "buralara daha çok vakit ayıracağım, bol bol yazacağım" desem, kesin başka bir şeyler çıkıyor; işler, güçler, yoğunluklar vs, odaklanamıyorum. Öyle ya da böyle bunu bir düzene oturtacağım. inatçıyım bu konuda....

8 Temmuz 2018, 04:55   —   #genel   —   Yorum yok.   —   Devamını Oku »
daha fazla göster