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, 9776 kez okunmuş ve 2 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!

2 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. :)

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 »

Buraları yine oldukça aksatmış olmanın verdiği iç rahatsızlığı ile, geçen haftadan beri bir şeyler karalamaya olan isteğim ancak şu an vuku buluyor. Geçen hafta oldukça yoğun ve hareketli geçtiği için yazmaya vakit bulamadım aslında. Ya da ne bileyim, belki de bahane buluyorum......

27 Şubat 2018, 11:34   —   #genel   —   2 yorum var.   —   Devamını Oku »

Gidelim buradan...

"Gidelim buradan... Göğsünü sıkan, içini daraltan o laneti geride bırakıp gidelim. Burada yağmur bile güzel yağmıyor artık. Yağmuru güzel yağan bir yerlere gidelim....

5 Ocak 2018, 04:57   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »

$_2018 = new HappyYear();

Zamanın ne denli hızlı aktığını bilmiyorum ama, gerçekten "su gibi" akıp geçiyor deyimi doğru galiba. Ne ara 2018 geldi, kapımıza dayandı; hiç bir fikrim yok. Oysa ben daha tarih yazmak zorunda olduğum kağıtlara "2017" yazmaya bile alışmamıştım. Şimdi bir de 2018 çıktı başımıza. ...

31 Aralık 2017, 17:10   —   #genel   —   Yorum yok.   —   Devamını Oku »

İnsanın içindeki sıkıntıya bir isim, bir sebep bulamamasına hep şaşırmışımdır. Çok şaşırdığı ne varsa, bunları çok mu yaşıyor insanlar genelde hiç bilmiyorum. Ama bu en azından bende genelde böyle oluyor. Açık konuşayım mı? Birinin bir sözü vardı, ama kimindi hatırlamıyorum. Şöyle diyordu: "Kafamdan atamıyorum. Hep aklıma geliyor, hem de en tuhaf zamanlarda. Duştan çıkarken, sokakta yürürken, gece yatağıma yatarken; bilinçli olarak bir şey düşünmediğim zamanlarda."... Sanki hayat denen bu değişik alem içinde, bir yerlerde bu söz içerisinde bir yerlerde sıkışmış kalmış gibiyim. Nedenini bilmiyorum. Belki de biliyorum. Belki de bildiğimi bilmiyorum. Belki anlatamıyorum, belki anlatmak istemiyorum. Belki içimden atmak istiyorum. Belki de atamıyorum. Belki seviyorum, belki de yine seviyorum.. Bazen çok saçmalıyorum değil mi? Biliyorum. Sarhoş da değilim ama olmadığıma da beni kim ikna edebilir? Zaten sarhoşken de anlatamıyorum. Atamıyorum. Seviyorum. Neyse, belki de en iyisi uyumak.

11 Aralık 2017, 04:27   —   #karalamaca   —   3 yorum var.   —   Devamını Oku »

hello İstanbul!

Üniversite hayatını bitirdik. Aslında planım, elimdeki projeler ile ilgilenip bir yandan da sene sonuna kadar kafa dinlemekti. 2018 itibariyle iş-güç arayışlarına girişecek ve mutlu olabileceğim, bana bi'şeyler katabilecek, hem kendime hem onlara fayda sağlayacağım bir şirket bulmak için adımlar atacaktım. Tahmin edeceğiniz üzere planlar yine tutmadı....

6 Ekim 2017, 10:02   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »

Eylül'dü. 
Dalından kopan yaprakların, 
Sararan yanlarına yazdım adını. 
Sahte bir gülüşten ibarettin oysa. 
Ve hiç bilmedin ellerimin soğuğunu. ...

16 Eylül 2017, 17:13   —   #karalamaca   —   Yorum yok.   —   Devamını Oku »
daha fazla göster