Properti white-space

Properti white-space mengatur cara memindahkan teks ke baris baru, serta bagaimana menampilkan spasi antar kata dan pemutusan baris (tempat di mana tombol Enter ditekan saat mengetik kode).

Sintaks

selector {
	white-space: nowrap | pre | pre-line | pre-wrap | normal;
}

Nilai

Nilai	Deskripsi
`nowrap`	Melarang teks untuk dipindahkan ke baris lain, bahkan jika teks tidak muat dalam lebar wadah (dalam hal ini teks akan keluar dari batasnya). Namun, penambahan tag `br` akan memaksa teks untuk pindah ke baris baru.
`pre`	Teks ditampilkan persis seperti yang diketik di editor saat membuat situs: dengan semua spasi dan enter-nya (jika dalam kode diketik beberapa spasi - di layar juga akan muncul beberapa). Pada saat yang sama, browser tidak akan memindahkan teks ke baris baru jika tidak muat dalam wadah - teks akan keluar dari batasnya. Analogi dari tag pre, tetapi tidak seperti tag tersebut, tidak mengubah font menjadi monospace (tentang font monospace lihat properti `font-family`.
`pre-wrap`	Sama seperti pre, perbedaannya adalah jika teks terlalu panjang dan tidak muat dalam wadah - browser akan memindahkannya ke baris lain.
`pre-line`	Browser hanya memperhitungkan Enter dalam kode HTML dan mengabaikan semua hal lainnya (beberapa spasi akan terlihat seperti satu, browser sendiri yang menempatkan pemutusan baris).
`normal`	Perilaku standar: browser sendiri yang menempatkan pemutusan baris agar kata-kata muat dalam wadah. Beberapa spasi dalam kode akan terlihat seperti satu di layar.

Nilai default: normal.

Contoh . Nilai nowrap

Dalam contoh ini, teks tidak akan muat dalam wadah dan akan keluar dari batasnya, karena diberikan nilai nowrap:

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

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

Contoh . Nilai nowrap dan tag br

Jika menambahkan tag br - teks akan pindah ke baris baru (tepat di tempat br berada):

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

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

Contoh . Nilai pre

Dalam contoh ini, teks ditampilkan persis seperti yang diketik di editor kode HTML (dengan semua indentasi menggunakan tombol Tab, dengan Enter dan sebagainya):

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

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

Contoh . Nilai pre-wrap

Sekarang teks ditampilkan persis seperti yang diketik di editor kode HTML, namun, bagian yang keluar dipindahkan ke baris baru:

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

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

Lihat Juga

properti word-break dan overflow-wrap,
yang memungkinkan untuk memindahkan huruf dari kata yang panjang ke baris baru
properti tab-size,
yang mengatur ukuran indentasi yang dibuat oleh tombol Tab
properti hyphens,
yang mengaktifkan pemenggalan kata berdasarkan suku kata
properti overflow,
yang memotong bagian yang keluar dari batas blok
tag pre,
yang menampilkan teks persis seperti yang diketik di editor kode HTML