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/