Beyaz boşluk - CSS Hileleri | CSS Almanak 2025

Beyaz boşluk özelliği, metnin uygulandığı öğede nasıl işleneceğini kontrol eder. Diyelim ki tam olarak böyle bir HTML'niz var:

 A bunch of words you see.

Div'i 100 piksellik bir genişliğe sahip olacak şekilde tasarladınız. Makul bir yazı tipi boyutunda, bu 100px'e sığmayacak kadar fazla metin demektir. Hiçbir şey yapmadan varsayılan white-spacedeğer olur normalve metin sarılır. Aşağıdaki örneğe bakın veya demoyu evde takip edin.

div ( /* This is the default, you don't need to explicitly declare it unless overriding another declaration */ white-space: normal; )

Metnin kaydırılmasını önlemek istiyorsanız, uygulayabilirsiniz white-space: nowrap;

Bu makalenin başındaki HTML kodu örneğindeki not, aslında iki satır sonu vardır, biri metin satırından önce ve biri sonra metnin kendi satırında (kodda) olmasına izin verir. Metin tarayıcıda görüntülendiğinde, bu satır sonları çıkarılmış gibi görünür. Ayrıca, ilk harften önceki satırda fazladan boşluklar çıkarılır. Tarayıcıyı bu satır sonlarını ve fazladan beyaz boşluk karakterlerini görüntülemeye zorlamak istiyorsak kullanabiliriz.white-space: pre;

Bu çağrının prenedeni, metni içeri kaydırmışsınız gibi

etiketleri (varsayılan olarak beyaz boşluğu ve satır sonlarını bu şekilde işler). Beyaz boşluk, tam olarak HTML'de olduğu gibi dikkate alınır ve metin, kodda bir satır sonu bulunana kadar kaydırılmaz. Bu, kodun kelimenin tam anlamıyla görüntülenirken özellikle yararlıdır, bu da bazı biçimlendirmelerden estetik olarak fayda sağlar (ve beyaz alana bağımlı dillerde olduğu gibi biraz zaman kesinlikle çok önemlidir!)

Belki prebeyaz boşluğun ve kırılmaların nasıl onurlandırılmasından hoşlanıyorsunuzdur , ancak metnin potansiyel olarak ana kapsayıcısından kopmak yerine sarılması gerekir. Bunun white-space: pre-wrap;için:

Son olarak, white-space: pre-line;kodda kırıldıkları yerde satırları kırar, ancak fazladan beyaz boşluk yine de çıkarılır.

İlginç bir şekilde, son satır sonu onurlandırılmamış. CSS 2.1 spesifikasyonuna göre: "Satırlar korunmuş satırsonu karakterlerinde ve gerektiğinde satır kutularını doldurmak için kesilir." belki de bu mantıklı.

İşte tüm farklı değerlerin davranışlarını anlamak için bir tablo:

	Yeni hatlar	Boşluklar ve sekmeler	Metin kaydırma
normal	Çöküş	Çöküş	Paketlemek
ön	Koru	Koru	Sarma yok
şimdi tuzak	Çöküş	Çöküş	Sarma yok
önceden sarma	Koru	Koru	Paketlemek
satır öncesi	Koru	Çöküş	Paketlemek

CSS3 yılında white-spacemülkiyet anlamıyla bu çizelgeyi takip edip karşı özelliklerini eşleştirmek için gidiyor text-space-collapseve text-wrapbuna göre.

Daha fazla bilgi

Mozilla Belgeleri

Tarayıcı Desteği

Her değerin farklı destek seviyeleri olduğundan, normal destek tablosundan biraz daha karmaşıktır:

Tarayıcı	Sürüm	Desteği
Internet Explorer	5.5	`normal \| nowrap`
	6.0	`normal \| pre \| nowrap`
	8+	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Firefox (Gecko)	1.0 (1.0)	`normal \| pre \| nowrap \| -moz-pre-wrap`
	3.0 (1.9)	`normal \| pre \| nowrap \| pre-wrap \| -moz-pre-wrap`
	3.5 (1.9.1)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Opera	4.0	`normal \| pre \| nowrap`
	8.0	`normal \| pre \| nowrap \| pre-wrap`
	9.5	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Safari (WebKit)	1.0 (85)	`normal \| pre \| nowrap`
Safari (WebKit)	3.0 (522)	`normal \| pre \| nowrap \| pre-wrap \| pre-line`