Kategoriler
Kodlama

Yalnızca CSS ile metni kısaltmak

CSS ile uzun yazıları kısaltmak çok basit.

Bazen bir html etiketi içerisinde yazıların(metin) uzunlukları tutarlı olmayabilir ve kaotik bir durum oluşur, belli ölçülerden taşar vs.

Bunu aşmak için ilgili etiket içerisindeki metnin uzunluğunu sınırlamak tasarımcıları rahatlatır, bunu genelde backend de yapmak gibi bir eğilim vardır ancak buna hiç gerek yok çünkü CSS ile de bu yapılabilir.

Aslında bu konudan daha önce de bahsetmiştik ama şimdi daha anlaşılır olması için yeniden eklemek istedim.

CSS ile metnin uzunluğunu sınırlamak aşağıdaki gibi yapılabilir:

.metnikisalt {
  width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Yukarıdaki CSS’de .metnikisalt içerisindeki metin 250px içerisinden daha uzun ve taşıyorsa CSS kodu bunun sınırlıyor ve text-overflow: ellipsis; ile sonuna işareti koyuyor, … ile metnin aslında göründüğünden daha uzun olduğunun kullanıcılar tarafından anlaşılması sağlanabilir.

Canlı örnek: https://truncate-string-with-ellipsis.glitch.me

Kaynak: https://wolkanca.com/css-text-overflow-ellipsis-kullanimi/

wolkanca.com’da Yalnızca CSS ile metni kısaltmak veya diğer konular hakkında herhangi bir sorunuz varsa, sosyal medya butonları ile yorum ya da mesaj göndermekten çekinmeyin, Yalnızca CSS ile metni kısaltmak için ya da değil DM kapısı her daim açık. Yazıyı beğendiyseniz paylaşın, daha fazla ilgili gönderi için hemen aşağıdaki menülere göz gezdirebilirsiniz, okuduğunuz için teşekkürler, saygılar sevgiler.

WOLKANCA

Volkan Yılmaz

Digital Marketing & WordPress & SEO - wolkanca mahallesi gmail sokak nokta com.