กฎการจัดการช่องว่าง HTML
"ช่องว่าง" ใน HTML มีสามประเภท: ช่องว่าง (ช่องว่าง) แท็บ (แท็บ) และการป้อนบรรทัด (CR/LF)
เรารู้ว่าตามค่าเริ่มต้น อักขระช่องว่างในซอร์สโค้ด HTML จะแสดงเป็นช่องว่าง และอักขระช่องว่างหลายตัวที่ต่อเนื่องกันจะถือเป็นหนึ่งเดียว หรืออีกนัยหนึ่งคือ อักขระช่องว่างหลายตัวที่ต่อเนื่องกันจะถูกรวมเข้าด้วยกัน
อย่างไรก็ตาม บางครั้งเราหวังว่าการเว้นวรรคหลายช่องติดต่อกันในซอร์สโค้ด HTML สามารถแสดงผลได้สมจริงในเว็บเบราว์เซอร์ หรือเราต้องการให้ตัวแบ่งบรรทัดในซอร์สโค้ดทำงานเป็นตัวแบ่งบรรทัดจริง ดังนั้นเราจึงค้นพบแท็ก
ซึ่งสามารถคืนค่าสถานการณ์ที่แท้จริงของอักขระช่องว่างในข้อความภายในได้อย่างแท้จริงดังนั้นเราจึงมักใส่ข้อความที่แสดงโค้ดคอมพิวเตอร์ลงในแท็ก
และข้อความเหล่านั้นจะแสดงการเยื้องพื้นที่และเอฟเฟกต์การตัดบรรทัดในเบราว์เซอร์ โดยที่เราไม่จำเป็นต้องเพิ่มสไตล์และแท็กเพิ่มเติมเพื่อควบคุมการเยื้อง และตัวแบ่งบรรทัดเนื่องจากความเข้าใจของเราเกี่ยวกับ CSS ยังคงลึกซึ้งยิ่งขึ้น เราพบว่าทั้งหมดนี้ถูกจัดเรียงโดยแอตทริบิวต์ white-space เหตุผลที่องค์ประกอบ
มีความมหัศจรรย์มากก็คือว่ามันมีสไตล์เริ่มต้น {white-space: pre;}คุณลักษณะช่องว่าง
แอตทริบิวต์ ช่องว่าง ใน CSS ใช้เพื่อกำหนดกฎการประมวลผลสำหรับอักขระช่องว่างของข้อความ รวมถึง: จะรวมอักขระช่องว่าง จะคงการขึ้นบรรทัดใหม่หรือไม่ และจะอนุญาตให้มีการตัดบรรทัดอัตโนมัติหรือไม่ ลักษณะการทำงานที่แตกต่างกันของค่าแอตทริบิวต์แต่ละค่าจะแสดงอยู่ในตารางต่อไปนี้:
รายการค่าแอตทริบิวต์ช่องว่าง
| ค่าแอตทริบิวต์ | ช่องว่าง | อักขระขึ้นบรรทัดใหม่ | การตัดบรรทัดอัตโนมัติ | ปรากฏตัวครั้งแรกใน |
|---|---|---|---|---|
normal | ผสาน | ละเลย | อนุญาต | ซีเอสเอส 1 |
nowrap | ผสาน | ละเลย | ไม่ได้รับอนุญาต | ซีเอสเอส 1 |
pre | จอง | จอง | ไม่ได้รับอนุญาต | ซีเอสเอส 1 |
pre-wrap | จอง | จอง | อนุญาต | ซีเอสเอส 2.1 |
pre-line | ผสาน | จอง | อนุญาต | ซีเอสเอส 2.1 |
( หมายเหตุ : ภายใต้ CSS1/2 คุณลักษณะ white-space สามารถใช้ได้กับองค์ประกอบระดับบล็อกเท่านั้น ส่วนภายใต้ CSS 2.1 สามารถใช้ได้กับองค์ประกอบทั้งหมด)
หากเราต้องการให้องค์ประกอบคอนเทนเนอร์มีพฤติกรรมการประมวลผลช่องว่างคล้ายกับองค์ประกอบ
เพียงตั้งค่าสไตล์ {white-space: pre;} จำเป็นต้องห่อล่วงหน้า
ก่อนอื่นมาอธิบายลักษณะการทำงานของ "การตัดคำอัตโนมัติ" ในตารางด้านบน โดยหมายถึงการไหลของข้อความภายในองค์ประกอบที่ถูกพิมพ์ไปในทิศทางของข้อความ เมื่อการไหลของข้อความพบขอบเขตที่จำกัดการขยายอย่างต่อเนื่อง ไม่ว่าจะตัดหรือก็ตาม ไม่. "ไม่อนุญาตให้มีการตัดคำ" หมายความว่าการไหลของข้อความจะล้นองค์ประกอบ
ดังนั้น บางครั้งสไตล์ {white-space: pre;} จึงไม่เป็นไปตามความคาดหวังของเรา ตัวอย่างเช่น ในบางสถานการณ์ที่ไม่ต้องการความเข้มงวดเป็นพิเศษ หรือเมื่อจัดรูปแบบข้อมูลโค้ดบางส่วนที่ไม่ละเอียดอ่อนต่อการขึ้นบรรทัดใหม่ (เช่น HTML หรือ CSS) เราไม่ต้องการให้โค้ดบรรทัดยาวในข้อมูลโค้ดทำให้เกิด องค์ประกอบคอนเทนเนอร์ให้เลื่อนในแนวนอนเพราะจะทำให้อ่านยาก เราหวังว่าในกรณีนี้ โค้ดขนาดยาวจะถูกตัดโดยอัตโนมัติ
ในขณะนี้ เมื่อเปรียบเทียบลักษณะพฤติกรรมที่แตกต่างกันของค่าแอตทริบิวต์แต่ละรายการในตารางด้านบน เราจะพบว่าค่าแอตทริบิวต์ก่อนห่อมีความโดดเด่น - นั่นคือสิ่งที่เราต้องการ