Uzun İçeriklerin CSS ile Yönetilmesi

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.

Overflow-wrap

İç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;
}

Hyphens

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;
}

Text Truncation

İç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;
}

Line-clamp

İç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;
}