Merhaba arkadaşlar, bu yazımızda CSS'i kullanarak belirli bir alandaki metnin alt satıra geçmesini engellemeyi, taşan kısımların gizlenmesini ve metnin sonuna üç nokta(...) koyma işleminin nasıl yapıldığını öğreneceğiz. Bu işlemler için CSS'in overflow, white-space ve text-overflow özelliklerini kullacanağız.
Kullanıma geçecek olursak;
.alan{
width: 200px; // Alanın genişliğini belirleme
overflow: hidden; // Alanın dışına taşanları gizle
white-space: nowrap; // Alt satıra geçmeyi engelle
text-overflow: ellipsis; // Uzunsa sonuna üç nokta koy
}Kodumuzun Çıktısı:
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Hepinize keyifli kodlamalar :)
.alan{ border: 1px solid #ccc; padding: 5px 10px; width: 500px; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }