Ruang putih - Trik CSS | CSS Almanak 2025

Properti white-space mengontrol bagaimana teks ditangani pada elemen yang diterapkan padanya. Katakanlah Anda memiliki HTML persis seperti ini:

 A bunch of words you see.

Anda telah memberi style pada div agar memiliki lebar set 100px. Pada ukuran font yang wajar, itu terlalu banyak teks untuk memuat 100px. Tanpa melakukan apa pun, nilai defaultnya white-spaceadalah normal, dan teks akan membungkusnya. Lihat contoh di bawah atau ikuti demo di rumah.

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

Jika Anda ingin mencegah pembungkusan teks, Anda dapat mendaftar white-space: nowrap;

Perhatikan pada contoh kode HTML di bagian atas artikel ini, sebenarnya ada dua baris baru, satu sebelum baris teks dan satu lagi setelah, yang memungkinkan teks berada di barisnya sendiri (dalam kode). Saat teks ditampilkan di browser, jeda baris tersebut muncul seolah-olah dihilangkan. Juga dihilangkan spasi ekstra pada baris sebelum huruf pertama. Jika kita ingin memaksa browser untuk menampilkan jeda baris dan karakter spasi tambahan yang dapat kita gunakanwhite-space: pre;

Disebut prekarena perilakunya seolah-olah Anda telah membungkus teks

tag (yang secara default menangani spasi putih dan jeda baris seperti itu). Ruang putih dihormati persis seperti di HTML dan teks tidak membungkus sampai jeda baris ada dalam kode. Ini sangat berguna ketika benar-benar menampilkan kode, yang secara estetika mendapat manfaat dari beberapa pemformatan (dan beberapa waktu sangat penting, seperti dalam bahasa yang bergantung pada ruang putih!)

Mungkin Anda menyukai cara premenghormati spasi dan jeda, tetapi Anda memerlukan teks untuk dibungkus alih-alih berpotensi keluar dari wadah induknya. Itulah white-space: pre-wrap;untuk:

Akhirnya, white-space: pre-line;akan memutus baris di mana mereka memecahkan kode, tetapi ruang putih ekstra masih dilucuti.

Menariknya, jeda baris terakhir tidak dihormati. Sesuai dengan spesifikasi CSS 2.1: "Garis dipecah pada karakter baris baru yang dipertahankan, dan seperlunya untuk mengisi kotak baris." jadi mungkin itu masuk akal.

Berikut adalah tabel untuk memahami perilaku dari semua nilai yang berbeda:

	Garis baru	Spasi dan tab	Pembungkusan teks
normal	Jatuh	Jatuh	Membungkus
pra	Melestarikan	Melestarikan	Tanpa bungkus
nowrap	Jatuh	Jatuh	Tanpa bungkus
bungkus sebelumnya	Melestarikan	Melestarikan	Membungkus
pra-baris	Melestarikan	Jatuh	Membungkus

Di CSS3, white-spaceproperti secara harfiah akan mengikuti bagan itu dan memetakan properti ke text-space-collapsedan text-wrapsesuai.

Informasi Lebih Lanjut

Mozilla Docs

Dukungan Browser

Sedikit lebih kompleks daripada tabel dukungan biasa, karena setiap nilai memiliki tingkat dukungan yang berbeda:

Browser	Versi: kapan	Dukungan
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`