white-space Özelliği

white-space özelliği, metnin yeni bir satıra nasıl taşınacağını, ayrıca kelimeler arasındaki boşlukların ve satır sonlarının (kod yazılırken Enter tuşuna basılan yerler) nasıl görüntüleneceğini ayarlar.

Sözdizimi

seçici {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Değerler

Değer	Açıklama
`nowrap`	Metnin, konteynerin genişliğine sığmıyor olsa bile (bu durumda metin sınırların dışına taşar) başka bir satıra taşınmasını engeller. Ancak, `br` etiketinin eklenmesi metnin yeni bir satıra taşınmasını sağlayacaktır.
`pre`	Metin, site kodlanırken metin editöründe yazıldığı gibi gösterilir: tüm boşluklar ve enter'larla birlikte (eğer kodda birden fazla boşluk yazıldıysa, ekranda da birden fazla boşluk olacaktır). Bu durumda, tarayıcı metni konteynere sığmıyorsa yeni bir satıra taşımaz - metin sadece sınırların dışına taşar. pre etiketinin bir benzeridir, ancak ondan farklı olarak yazı tipini monospace'e değiştirmez (monospace yazı tipi için bkz. `font-family` özelliği).
`pre-wrap`	pre ile aynı şeydir, farkı şudur: eğer metin çok uzunsa ve konteynere sığmıyorsa - tarayıcı onu başka bir satıra taşıyacaktır.
`pre-line`	Tarayıcı sadece HTML kodundaki Enter'ları dikkate alır ve geri kalan her şeyi yok sayar (birden fazla boşluk tek bir boşluk gibi görünecektir, tarayıcı satır sonlarını kendisi belirler).
`normal`	Standart davranış: tarayıcı, kelimeler konteynere sığacak şekilde satır sonlarını kendisi belirler. Koddaki birden fazla boşluk, ekranda tek bir boşluk olarak görünecektir.

Varsayılan değer: normal.

Örnek . nowrap değeri

Bu örnekte metin konteynere sığmayacak ve sınırlarının dışına taşacaktır, çünkü nowrap değeri atanmıştır:

<div id="elem">
	Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Örnek . nowrap değeri ve br etiketi

Eğer br etiketi eklerseniz - metin yeni bir satıra taşınacaktır (tam olarak br etiketinin olduğu yerde):

<div id="elem">
	Lorem ipsum dolor sit <br> amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: nowrap;
	border: 1px solid red;
}

Örnek . pre değeri

Bu örnekte metin, HTML kod editöründe yazıldığı gibi gösterilir (tüm Tab tuşuyla yapılan girintiler, Enter'lar vb. ile birlikte):

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre;
	border: 1px solid red;
}

Örnek . pre-wrap değeri

Ancak şimdi metin, HTML kod editöründe yazıldığı gibi gösterilir, ancak taşan kısımlar yeni bir satıra taşınır:

<div id="elem">
	Lorem ipsum
	
		dolor sit amet, consectetur adipiscing elitorire.
</div>

#elem {
	width: 200px;
	white-space: pre-wrap;
	border: 1px solid red;
}

Ayrıca Bakınız

uzun bir kelimenin harflerinin yeni bir satıra taşınmasına izin veren word-break ve overflow-wrap özellikleri
Tab tuşuyla oluşturulan girintinin boyutunu ayarlayan tab-size özelliği
kelimelerin hecelere göre taşınmasını etkinleştiren hyphens özelliği
bloğun sınırlarını aşan kısımları kesen overflow özelliği
metni, HTML kod editöründe yazıldığı gibi gösteren pre etiketi