CSS white-space Özelliği

Bir HTML element içerisindeki metinlerin beyaz boşluklarının nasıl görüneceğini CSS white-space özelliği tanımlıyor.

white-space özelliğinin aldığı değerler:

  • normal (varsayılan)
  • nowrap
  • pre
  • pre-wrap
  • pre-line

Örnekler eşliğinde devam edersek daha kolay anlaşılacaktır.

<div>
   Merhaba wwreply.com takipçileri, bu dersimizde white-space konusunu işliyoruz.
</div>

Yukarıdaki gibi bir HTML kodumuz var.Buradaki div elementimizin genişliğini 100px yaptığımızı farzedelim.Normal durumda div içerisindeki metin div genişliğinden büyük olduğu için, elementin bittiği yerden cümleyi kırıp bir alt satıra geçer.Yani aşağıdaki gibi sonuç elde ederiz.CSS kısmında white-space özelliğini kullanmadığınızda, white-space özelliğinin varsayılan değeri  normal olur.

Sarı çerçeve div elementimizin kapsadığı alanı göstermektedir.Burada 100px baz alınmıştır.

nowrap

Eğer cümleyi kırmak istemiyorsanız yani cümle div elementinin genişliğini (100px tanımlı genişliği) aşıp geçsin, bir aşağı satıra kaymasın diyorsanız o zaman nowrap değeri kullanılır.Cümlemiz 100px genişliğinden daha fazla ise div kapsayıcısını aşıp geçer. Aşağıdaki gibi bir sonuç ortaya çıkar.

Pre

White-space yani beyaz boşluk konusunda kafa karıştıran yere geldik.Yukarıdaki normal ve nowrap değerlerini kolay şekilde anlaşılabiliyor fakat pre değeri biraz kafa karıştırıcıdır.

En yukarıdaki HTML içeriğimize dikkatlice bakalım.Div etiketimizi açtıktan sonra koca satırı boş bırakıp metnimizi bir aşağı satıra ve biraz içeride yazmışız.Aynı şekilde bir alt satıra geçip div etiketimizi kapatmışız.İşte pre değeri etiketlerden sonraki boşlukları ve içeriğimizden önce bıraktığımız boşluğu, bilerek bıraktığımızı düşünerek HTML kodlarında ne gördüyse o şekilde çıktı veriyor.Yani aşağıdaki gibi bir sonuç ortaya çıkıyor.

pre değeri HTML alanında nasıl bir görünüm varsa o şekilde çıktı veriyor.Yani metnimizi ‘takipçileri’ kelimesinden sonra aşağı satıra yazmış olsaydık, çıktımız da aynen o şekilde çıkacaktı.Aşağıdaki görüntüde olduğu gibi.

Pre-wrap

Bu değerde pre değeri gibi HTML sayfasında gördüğü boşlukları önemsiyor fakat div elementimizin boyutlarını aşmamak için cümleyi uygun yerden kırıyor.Aşağıdaki görüntüde cümlenin üstünde ve altındaki div etiket boşlukları ve cümlenin başındaki girinti boşluğuna dikkat edin.

Pre-line

Bu değerde pre-wrap değeri ile aynı mantığa sahip fakat farklı olarak sadece ilk satırdaki div etiketinin boşluğunu hesaba katıyor.

Eğer metnimizin başlangıcını div etiketi ile aynı satıra getirirseniz (div etiketi ile metin arasında boşluk olsa dahi) yukarıdaki görüntüde gördüğünüz ilk boşluk da kalmayacaktır.

White-space Özelliği Nerelerde Kullanılır?

Son olarak:

Beyaz boşluk (white-space) özelliği daha çok kodlar gibi özel yazıma sahip içerikleri metinler arasında belirtmek için sıkça kullanılır.Bu yazı beyaz boşluk kavramını detaylı olarak ele aldık.Aklınıza takılan veya anlamadığınız yerler varsa yorum alanında belirtebilirsiniz.

Bunları da beğenebilirsin