15.08.2022
Css’ de bir layout oluştururken metin içeriklerinin uzunluğunu da hesaba katmak önemlidir. Metne bir kelime eklenmesi ya da çıkarılması durumunda tasarımın değişmesine sebep olacak birçok durum vardır. Bu yazıda farklı metin uzunluklarını yönetebilmek için kullanılabilecek yöntemlerden bahsedeceğim. Yöntemlerden hangisinin kullanılacağı sayfa kullanım amacına göre değişiklik gösterebilir.
İçeriğin boyutu kapsayıcısının alanından daha büyükse, varsayılan olarak alt satıra bölünmez ve kapsayıcısının dışına taşar. Bu sorundan kaçınmak için kullanabileceğimiz yöntemlerden biri overflow-wrap özelliğidir.
Varsayılan olarak overflow-wrap:normal;
değerini alır. Uzun içeriğin yeterli alan kalmadığında bir alt satıra geçmesini sağlamak için bu değeri overflow-wrap:break-word;
olarak ayarlamalıyız. Aşağıdaki CSS kodu ile istediğimiz görüntüyü elde edebiliriz.
.element {
overflow-wrap: break-word;
}
Kelimeler satıra sığmadığında tarayıcı tarafından HTML’de belirtilen dile göre bölünür. Aşağıdaki CSS kodu ile bir alt satıra tire işareti koyarak geçebiliriz.
.element {
hyphens: auto;
}
İçeriğimizin tek satırdan oluşmasını istediğimiz zamanlarda kullanabileceğimiz bir yöntemdir. Kapsayıcı alanının sonuna gelindiğinde üç nokta koyarak içeriği keser. Bu şekilde içeriğin devamı olduğunu da belirtmiş oluruz. Özel bir CSS niteliği yoktur ancak birtakım css özellikleri bir araya gelerek istediğimiz görüntüyü oluşturmamızı sağlar.
.element{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
İçeriğimizin belirli bir satırdan sonra kesilmesini isteyebiliriz. Bu gibi durumlarda line-clamp özelliği kullanılabilir. Bu özellik ile belirtilen sayı kadar satırdan sonra içerik kesilir. Bu yöntemin çalışabilmesi için display:-webkit-box; kullanılmalıdır. Bir diğer önemli husus ise içeriğin olduğu elementte padding kullanılma durumudur. Padding boş bir satır olarak algılanır ve içerik ayarladığımızdan daha fazla sayıda satırda görünür. Aşağıda CSS line-clamp kodu ve padding uygulanmış hali ile padding uygulanmamış hali arasındaki fark gösterilmiştir.
.element {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
Perfist Blog
Benzer Yazılar
Web sitenizi ziyaret edenlerin hangi kanallar aracılığıyla size ulaştığını, pazarlama stratejilerinizin başarısını ölçmek için önemlidir. Google Analytics 4 (GA4), trafik kaynaklarını analiz etmek için kanal gruplaması (Channel Grouping) özelliğini sunar. Kanal gruplaması sayesinde ziyaretçi trafiğinizi belirli kategorilere ayırabilir ve daha doğru pazarlama kararları alabilirsiniz. GA4’te Kanal Gruplaması Nedir? GA4’te kanal gruplaması, Organik Arama, Ücretli Arama, […]
Devamını Oku
Beginner Level Web/App AnalitiğiE-Ticaret SEO Nedir? E-Ticaret SEO, online mağazaların arama motorlarında üst sıralarda yer almasını sağlamak için yapılan optimizasyon çalışmalarını kapsar. Ürün sayfalarının, kategori sayfalarının ve blog içeriklerinin arama motoru algoritmalarına uygun hale getirilmesiyle organik trafik artırılır. Doğru yapılandırılmış bir SEO stratejisi, kullanıcıların ilgili ürünlere daha hızlı ulaşmasını ve satışların artmasını destekler. E-Ticaret SEO, dijital pazarlamanın en […]
Devamını Oku
Mid Level SEODijital pazarlamada yapay zekanın etkisinin hızla arttığı bir dönemdeyiz. Özellikle Google Ads, yapay zekâ (AI) entegrasyonları sayesinde reklam stratejilerinde önemli değişimlere öncülük ediyor. Reklamcılar arasında “anahtar kelimesiz search optimizasyonu” olarak nitelendirilen AI Max Search Ads, içinde olduğumuz mayıs ayının başında Google tarafından duyuruldu ve geçtiğimiz günlerde yapılan Google Marketing Live 2025 etkinliğinde ayrıntılı olarak tanıtıldı. […]
Devamını Oku
Senior Level Performans PazarlamasıArama Niyeti (Search Intent) Nedir? Arama niyeti (Search Intent), kullanıcıların bir sorguyu gerçekleştirirken ulaşmak istediği asıl amacı ifade eder. Google ve diğer arama motorları, yalnızca kelimeleri değil, bu kelimelerin bağlamını ve kullanıcının ne aradığını anlamaya odaklanır. Arama niyeti, bilgilendirici, gezinsel, ticari araştırma ve işlemsel olmak üzere dört ana kategoriye ayrılır. Kullanıcılar bazen bilgi edinmek, bazen […]
Devamını Oku
Mid Level SEO