Ruang putih - Trik CSS | CSS Almanac 2025

Properti ruang putih mengawal bagaimana teks ditangani pada elemen yang digunakan. Katakan anda mempunyai HTML seperti ini:

 A bunch of words you see.

Anda telah menggayakan div untuk mempunyai lebar set 100px. Pada saiz fon yang berpatutan, teks itu terlalu banyak untuk dimuat dalam 100 piksel. Tanpa melakukan apa-apa, nilai lalai white-spaceadalah normal, dan teks akan dibungkus. Lihat contoh di bawah atau ikuti di rumah dengan demo.

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

Sekiranya anda ingin mengelakkan teks daripada dibungkus, anda boleh memohon white-space: nowrap;

Perhatikan dalam contoh kod HTML di bahagian atas artikel ini, sebenarnya terdapat dua jeda baris, satu sebelum baris teks dan satu selepas, yang membolehkan teks berada pada barisnya sendiri (dalam kod). Apabila teks dirender di penyemak imbas, jeda baris itu kelihatan seolah-olah dilucutkan. Juga dilucutkan ruang tambahan pada baris sebelum huruf pertama. Sekiranya kita mahu memaksa penyemak imbas untuk menampilkan jeda baris dan watak ruang kosong tambahan yang boleh kita gunakanwhite-space: pre;

Ini disebut prekerana tingkah laku itu seolah-olah anda telah membungkus teks

tag (yang secara lalai mengendalikan ruang kosong dan garis putus dengan cara itu). Ruang putih dihormati sama seperti yang terdapat dalam HTML dan teksnya tidak akan dibungkus sehingga terdapat garis putus dalam kod. Ini sangat berguna ketika memaparkan kod secara harfiah, yang memberi keuntungan secara estetik dari beberapa pemformatan (dan beberapa waktu sangat penting, seperti dalam bahasa bergantung pada ruang putih!)

Mungkin anda suka bagaimana premenghormati ruang putih dan pecah, tetapi anda memerlukan teks untuk dibungkus dan bukannya berpotensi keluar dari bekas induknya. Itulah white-space: pre-wrap;untuk:

Akhirnya, white-space: pre-line;akan memecahkan garis di mana mereka memecahkan kod, tetapi ruang putih tambahan masih dilucutkan.

Menariknya, penembusan baris terakhir tidak dihormati. Sesuai dengan spesifikasi CSS 2.1: "Garis dipecahkan pada karakter baris baru yang diawetkan, dan jika perlu untuk mengisi kotak baris." jadi mungkin itu masuk akal.

Berikut adalah jadual untuk memahami tingkah laku semua nilai yang berbeza:

	Baris baru	Ruang dan tab	Pembungkus teks
biasa	Runtuhkan	Runtuhkan	Bungkus
pra	Memelihara	Memelihara	Tanpa bungkus
sekarang	Runtuhkan	Runtuhkan	Tanpa bungkus
pra-balut	Memelihara	Memelihara	Bungkus
pra-baris	Memelihara	Runtuhkan	Bungkus

Dalam CSS3, white-spaceharta itu benar-benar akan mengikuti carta itu dan memetakan harta tanah ke text-space-collapsedan text-wrapsesuai.

Maklumat lanjut

Dokumen Mozilla

Sokongan Penyemak Imbas

Sedikit lebih kompleks daripada jadual sokongan biasa, kerana setiap nilai mempunyai tahap sokongan yang berbeza:

Penyemak Imbas	Versi	Sokongan dari
internet Explorer	5.5	`normal \| nowrap`
	6.0	`normal \| pre \| nowrap`
	8+	`normal \| pre \| nowrap \| pre-wrap \| pre-line`
Firefox (Tokek)	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`