CSS white-space Kullanımı

CSS "white-space" özelliği, HTML ve XML belgelerinde boşlukların nasıl işleneceğini belirler. Özellik olarak "normal", "nowrap", "pre", "pre-line" ve "pre-wrap" değerleri kullanılabilir.

  • "normal" değeri, belgede bulunan boşlukları ve satır sonlarını birleştirir ve satırları otomatik olarak yeniden boyutlandırır. Bu, varsayılan değerdir ve genellikle metin bloğunda kullanılır.
  • "nowrap" değeri, satırlar arasında boşluk bırakmaz ve metnin aynı satırda görünmesini sağlar. Bu, sütunlar arasında metin göstermek için kullanılabilir.
  • "pre" değeri, belgede bulunan boşlukları ve satır sonlarını aynen korur. Bu, kod bloğunda veya biçimlendirilmiş metin göstermek için kullanılabilir.
  • "pre-line" değeri, belgede bulunan satır sonlarını korur ancak boşlukları birleştirir. Bu, metin bloğunda veya şiirlerde kullanılabilir.
  • "pre-wrap" değeri, belgede bulunan boşlukları ve satır sonlarını aynen korur ve ekstra boşluklar oluştuğunda satırı yeniden boyutlandırır. Bu, metin bloğunda veya şiirlerde kullanılabilir.

Aşağıdaki örnekleri inceleyelim...

<div style="white-space: pre;">
   Bu metin içinde
   boşluklar ve satır sonları
   aynen korunacaktır.
</div>

Bu kod bloğunda "white-space" özelliği "pre" değeri kullanılmıştır. Bu nedenle, belgede bulunan boşluklar ve satır sonları aynen korunacaktır ve metin bloğunda görüntülenir.

2. Örneğimize bakalım..

<div style="white-space: nowrap;">
   Bu metin içinde satırlar arasında boşluk bırakılmayacak ve metin aynı satırda görüntülenir.
</div>

Bu kod bloğunda "white-space" özelliği "nowrap" değeri kullanılmıştır. Bu nedenle, satırlar arasında boşluk bırakılmayacak ve metin aynı satırda görüntülenir.

Bir diğer örnek..

<div style="white-space: pre-line;">
   Bu metin içinde
   satır sonları korunacak,
   ancak boşluklar birleştirilecektir.
</div>

Bu kod bloğunda "white-space" özelliği "pre-line" değeri kullanılmıştır. Bu nedenle, belgede bulunan satır sonları korunacak, ancak boşluklar birleştirilecek ve metin bloğunda görüntülenecektir.

Son olarak..

<div style="white-space: pre-wrap;">
   Bu metin içinde
   boşluklar ve satır sonları
   aynen korunacaktır. Ancak ekstra
   boşluklar oluştuğunda satır yeniden
   boyutlandırılacaktır.
</div>

Bu kod bloğunda "white-space" özelliği "pre-wrap" değeri kullanılmıştır. Bu nedenle, belgede bulunan boşluklar ve satır sonları aynen korunacaktır. Ancak ekstra boşluklar oluştuğunda satır yeniden boyutlandırılacaktır ve metin bloğunda görüntülenecektir.

Her bir örnekte görüldüğü gibi "white-space" özelliği ile metin içinde boşlukların nasıl işleneceği ve görüntüleneceği belirlenir. Varsayılan değer "normal" olmasına rağmen, metin bloğunda, kod bloğunda, sütunlar arasında metin göstermek için vb. için kullanılabilir.


CSS

İlginizi Çekebilir

CSS hyphens Kullanımı

CSS align-items Kullanımı

CSS justify-items Kullanımı

CSS border-image-slice Kullanımı

CSS text-orientation Kullanımı