Sifat white-space

Sifat white-space menetapkan cara memindahkan teks ke baris baru, dan juga cara memaparkan ruang antara perkataan dan pemisahan baris (tempat di mana Enter ditekan ketika menaip kod).

Sintaks

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

Nilai

Nilai	Penerangan
`nowrap`	Melarang teks dipindahkan ke baris lain, walaupun jika ia tidak muat dalam lebar bekas (dalam kes ini teks akan keluar dari sempadannya). Walau bagaimanapun, penambahan tag `br` akan memaksa teks dipindahkan ke baris baru.
`pre`	Teks dipaparkan seperti yang ditaip dalam editor kod ketika melaksanakan penghasilan laman web: dengan semua ruang dan enter (jika beberapa ruang ditaip dalam kod - beberapa ruang juga akan dipaparkan pada skrin). Pada masa yang sama, pelayar tidak akan memindahkan teks ke baris baru jika ia tidak muat dalam bekas - teks akan keluar dari sempadannya. Setara dengan tag pre, tetapi berbeza daripadanya kerana tidak mengubah font kepada monospace (untuk font monospace lihat sifat `font-family`.
`pre-wrap`	Sama seperti pre, perbezaannya ialah jika teks terlalu panjang dan tidak muat dalam bekas - pelayan akan memindahkannya ke baris lain.
`pre-line`	Pelayar hanya mengambil kira Enter dalam kod HTML dan mengabaikan segala yang lain (beberapa ruang akan kelihatan seperti satu, pelayar sendiri meletakkan pemisahan baris).
`normal`	Tingkah laku standard: pelayar sendiri meletakkan pemisahan baris supaya perkataan muat dalam bekas. Beberapa ruang dalam kod akan kelihatan seperti satu pada skrin.

Nilai lalai: normal.

Contoh . Nilai nowrap

Dalam contoh ini teks tidak akan muat dalam bekas dan akan keluar dari sempadannya, kerana ditetapkan 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 menambah tag br - teks akan dipindahkan ke baris baru (tepat di tempat di mana 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 dipaparkan seperti, yang ditaip dalam editor kod HTML (dengan sempa inden menggunakan kekunci 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

Dan sekarang teks dipaparkan seperti yang ditaip dalam editor kod HTML, namun, bahagian 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

sifat word-break dan overflow-wrap,
yang membenarkan huruf perkataan panjang dipindahkan ke baris baru
sifat tab-size,
yang menetapkan saiz inden, dihasilkan oleh kekunci Tab
sifat hyphens,
yang menghidupkan pemindahan perkataan mengikut suku kata
sifat overflow,
yang memotong bahagian yang keluar dari sempadan blok
tag pre,
yang memaparkan teks seperti yang ditaip dalam editor kod HTML