Bu biraz zaman alabilir...
css'de yazıyı sınırlandırmak
Yazıldığından bu yana, 28295 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!
PHP 8.2 - yeniliklere hızlı bakış
24 Kasım 2022 tarihinde PHP 8.2 versiyonunun kararlı sürümünün yayınlanması bekleniyor. Bu yazımızda PHP’nin yeni sürümü için yapılan yenilikleri ve iyileştirmeleri inceleyeceğiz.
...
laravel: concurrent request
In Laravel, you can make concurrent request by using pool method of the HTTP Client of the Laravel....
laravel: extend any service from container
Laravel has a very powerful and useful Service Container and you can extend any service from the Laravel Container any time. For that, you can use the extend() method to decorate or configure the resolve services from the container. ...
laravel: using eager loading with models
We use models a lot when developing projects with Laravel. By defining the relationships between the tables within the models, we ensure that the relevant data is brought over the database in a practical way. We can take advantage of the Eager Loading feature to increase performance and get faster results when performing operations with related models. For this, we can use the with() method when creating a query from the related models:
...
laravel: faker ile resim oluşturmak
Bildiğiniz gibi Laravel ile geliştirme yaparken modellerimize uygun şekilde fake veriler oluşturmak için Faker kütüphanesi ile fazlaca haşır neşir oluyoruz. Genellikle text veriler oluştursak da, Faker kütüphanesinin resim oluşturmak gibi yetenekleri de var:...
Laravel'de zamanlanmış görev (scheduled task) tanımlarken, çalışan komutun tamamlanıp tamamlanmadığını anlamak ve buna göre başka işlemler yapmak istiyorsanız şu şekilde bir yapı kullanabilirsiniz:
PHP 8.1 - yeniliklere hızlı bakış
PHP 8.1, 25 Kasım 2021 tarihinde yayınlandı. Bu sürümde hayatımıza neler girdi, ne gibi değişiklikler yapıldı birlikte inceleyelim mi?...
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…
...
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....
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....
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?
...
React ile High Order Component (HOC) kullanımı
React ile High Order Component kavramını sizlere anlatmaya çalışacağım....
Selamlar, oldukça uzun bir zaman sonra tekrar buralardayım. Dolu dolu geldim ama; biraz oturun, konuşalım....
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....
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......
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....
3 adet yorum yapılmış. Sende yap!