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.