Uzun metinlerin sonunda üç nokta eklemek, okuyucunun merakını uyandırmak ve yazının devamı olduğu izlenimini yaratmak için etkili bir tekniktir. Bu tür bir uygulama, bazen bir <p> etiketi ile yapılırken, bazen de doğrudan bir <div> etiketi kullanılarak gerçekleştirilebilir. Hangi HTML etiketinin kullanılacağı, tasarımın gereksinimlerine ve yapısına bağlı olarak değişir.
Bu yazıda, örneğinizi daha iyi anlatabilmek için, HTML’deki <div> etiketi üzerinden bir senaryo sunacağım. Bu şekilde, farklı etiketler üzerinde de aynı mantığı nasıl uygulayabileceğinizi rahatlıkla görebilirsiniz.
Div etiketi içerisinde, göstermek istediğiniz metnin uzunluğu, div’in genişliğinden fazla olduğunda, içerik otomatik olarak ikinci satıra kayar. Bu durumu engellemek ve mevcut tasarımınızı bozmadan metni düzgün bir şekilde göstermek için aşağıdaki CSS kod bloğunu kullanmanız gerekmektedir.
div {
width: 60px;
overflow: hidden; /* uzunluktan taşanları gizle */
white-space: nowrap; /* yazıyı alt satır indirme */
text-overflow: ellipsis; /* css yazının sonuna üç nokta koymak üç nokta koyacak */
}Bu örnekte, sayfanızda yalnızca bir div bulunduğunu varsayıyoruz. Bu durumda, div’in tasarımınıza uygun olarak genişliği 60px ile sınırlanmış. Fazla içeriğin taşmaması için CSS ile yazının sonuna üç nokta ekleyerek gerekli düzenlemeyi yapmamız gerekiyor.
İlk olarak, white-space: nowrap; özelliği ile içeriklerin alt satıra inmesini engelliyoruz. Ancak asıl amacımız, taşan yazıyı üç nokta ile gösterebilmek. Bu durumu gerçekleştirmek için text-overflow: ellipsis; özelliğini kullanıyoruz. Bu, yazının uzun olduğu durumlarda, taşan kısmın yerine üç nokta ekler. Ayrıca, taşan kısmın görünmemesi için overflow: hidden; kodunu da eklemeliyiz. Bu detaylar, tüm taşan içeriğin gizlenmesini ve estetik bir şekilde üç nokta ile gösterilmesini sağlar.
