CSS3 text-overflow Yazı Taşması

Paylaş

CSS3 ile birlikte gelen ve yazı taşma sorunu için bir çözüm olan text-overflow özelliği ve kullanımı ile ilgili bilgiler yer alıyor.

Yazılar bazen HTML etiketinin genişliğini aşıp elemanın dışına taşabiliyor.

Yazı taşma sorununu engellemek ve taşan yerleri gizlemek için overflow:hidden; özelliği kullanarak gizlenebilir.

Ancak taşan yazı istediğimiz şekilde ayrılmamış olabilmekte ve istenmeyen durum ortaya çıkmaktadır.

CSS yazı taşma sorunu

Aşağıdaki gibi bir yapımızın olduğunu varsayalım.

<div>Bu, kutuya sığmayacak uzun metindir.</div>

Bu yapıya çeşitli özellikleri uygulayalım.

div {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
}

CSS kodlarımızdaki overflow: hidden; özelliği ile div dışına taşma sorununu engelledik.

Fakat yazının devam edip etmediğini tam olarak bilmiyoruz.

Çünkü devam ettiğini ifade eden herhangi bir ifade yok.

İşte burada yazının devam ettiğini ve taşma olduğunu ifade etmemizi sağlayan text-overflow özelliğini kullanıyoruz.

div {
    white-space: nowrap; 
    width: 200px; 
    border: 1px solid #000000;
    overflow: hidden;
    text-overflow: ellipsis;
}

Artık yazımızı yazı taşma sorununu engellemiş ve yazının devam ettiğini ifade etmiş olduk.

Hayırlı günler dilerim.