คุณสมบัติ white-space

คุณสมบัติ white-space กำหนดวิธีการตัดข้อความไปยังบรรทัดใหม่ รวมถึง วิธีการแสดงช่องว่างระหว่างคำและการขึ้นบรรทัดใหม่ (ตำแหน่งที่กด Enter ขณะพิมพ์ โค้ด)

ไวยากรณ์

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

ค่าต่างๆ

ค่า	คำอธิบาย
`nowrap`	ห้ามไม่ให้ข้อความตัดไปยังบรรทัดอื่น แม้ว่าจะไม่พอดี กับความกว้างของคอนเทนเนอร์ (ในกรณีนี้ข้อความจะล้นออกนอกขอบเขต) อย่างไรก็ตาม การเพิ่มแท็ก `br` จะบังคับให้ข้อความตัดไปยังบรรทัดใหม่
`pre`	ข้อความจะแสดงตามที่พิมพ์ในโค้ด HTML: พร้อมช่องว่างทั้งหมดและ การขึ้นบรรทัดใหม่ทั้งหมด (หากในโค้ดมีช่องว่างหลายอัน - บนหน้าจอก็จะมีหลายอัน) ขณะเดียวกันเบราว์เซอร์จะไม่ตัดข้อความไปบรรทัดใหม่ หากข้อความไม่พอดี กับคอนเทนเนอร์ - ข้อความจะล้นออกนอกขอบเขต ทำงานคล้ายกับ แท็ก pre แต่แตกต่างตรงที่ไม่ได้เปลี่ยน ฟอนต์เป็นแบบ monospace (เกี่ยวกับฟอนต์ monospace ดูที่คุณสมบัติ `font-family`)
`pre-wrap`	เหมือนกับ pre แต่ต่างกันตรงที่หากข้อความ ยาวเกินไปและไม่พอดีกับคอนเทนเนอร์ - เบราว์เซอร์จะตัดมันไปยังบรรทัดอื่น
`pre-line`	เบราว์เซอร์คำนึงถึงเฉพาะ Enter ในโค้ด HTML และละเว้น อย่างอื่นทั้งหมด (ช่องว่างหลายอันจะแสดงเป็นอันเดียว เบราว์เซอร์จะจัดการการตัดบรรทัดเอง)
`normal`	พฤติกรรมมาตรฐาน: เบราว์เซอร์จัดการการตัด บรรทัดเอง เพื่อให้คำต่างๆ พอดีกับคอนเทนเนอร์ ช่องว่างหลายอันในโค้ดจะแสดงเป็น อันเดียวบนหน้าจอ

ค่าเริ่มต้น: normal

ตัวอย่าง . ค่า nowrap

ในตัวอย่างนี้ข้อความจะไม่พอดีกับคอนเทนเนอร์ และล้นออกนอกขอบเขต เนื่องจากตั้งค่า เป็น nowrap:

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

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

ตัวอย่าง . ค่า nowrap และแท็ก br

หากเพิ่มแท็ก br - ข้อความจะตัด ไปยังบรรทัดใหม่ (ตรงตำแหน่ง ที่ br อยู่):

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

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

ตัวอย่าง . ค่า pre

ในตัวอย่างนี้ข้อความแสดงตาม ที่พิมพ์ในโปรแกรมแก้ไขโค้ด HTML (พร้อม การย่อหน้าทั้งหมดด้วยปุ่ม Tab, Enter และ อื่นๆ):

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

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

ตัวอย่าง . ค่า pre-wrap

ตอนนี้ข้อความแสดงตามที่ พิมพ์ในโปรแกรมแก้ไขโค้ด HTML อย่างไรก็ตาม ส่วนที่ล้น จะถูกตัดไปยังบรรทัดใหม่:

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

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

ดูเพิ่มเติม

คุณสมบัติ word-break และ overflow-wrap,
ซึ่งอนุญาตให้ตัดตัวอักษรของคำยาวไปยังบรรทัดใหม่
คุณสมบัติ tab-size,
ซึ่งกำหนดขนาดการย่อหน้าที่สร้างโดยปุ่ม Tab
คุณสมบัติ hyphens,
ซึ่งเปิดใช้งานการตัดคำตามพยางค์
คุณสมบัติ overflow,
ซึ่งตัดส่วนที่ล้นออกนอกขอบเขตของบล็อก
แท็ก pre,
ซึ่งแสดงข้อความตามที่พิมพ์ในโปรแกรมแก้ไขโค้ด HTML