ใช้ white-space:pre-wrap ภายใต้ IE6 และ 7;

กฎการจัดการช่องว่าง HTML

"อักขระช่องว่าง" ใน HTML มีสามประเภท: ช่องว่าง แท็บ และการป้อนบรรทัด (CR/LF)

เรารู้ว่าตามค่าเริ่มต้น อักขระช่องว่างในซอร์สโค้ด HTML จะแสดงเป็นช่องว่าง และอักขระช่องว่างหลายตัวที่ต่อเนื่องกันจะถือเป็นหนึ่งเดียว หรืออีกนัยหนึ่งคือ อักขระช่องว่างหลายตัวที่ต่อเนื่องกันจะถูกรวมเข้าด้วยกัน

อย่างไรก็ตาม บางครั้งเราหวังว่าการเว้นวรรคหลายช่องติดต่อกันในซอร์สโค้ด HTML สามารถแสดงผลได้สมจริงในเว็บเบราว์เซอร์ หรือเราต้องการให้ตัวแบ่งบรรทัดในซอร์สโค้ดทำงานเป็นตัวแบ่งบรรทัดจริง ดังนั้นเราจึงค้นพบแท็ก <pre> ซึ่งสามารถคืนค่าสถานการณ์ที่แท้จริงของอักขระช่องว่างในข้อความภายในได้อย่างแท้จริง

ดังนั้นเราจึงมักใส่ข้อความที่แสดงโค้ดคอมพิวเตอร์ลงในแท็ก <pre> และข้อความเหล่านั้นจะแสดงการเยื้องพื้นที่และเอฟเฟกต์การตัดบรรทัดในเบราว์เซอร์ โดยที่เราไม่จำเป็นต้องเพิ่มสไตล์และแท็กเพิ่มเติมเพื่อควบคุมการเยื้อง และตัวแบ่งบรรทัด

เนื่องจากความเข้าใจของเราเกี่ยวกับ CSS ยังคงลึกซึ้งยิ่งขึ้น เราพบว่าทั้งหมดนี้ถูกจัดเรียงโดยแอตทริบิวต์ white-space เหตุผลที่องค์ประกอบ <pre> มีความมหัศจรรย์มากก็คือว่ามันมีสไตล์เริ่มต้น {white-space: pre;}

คุณสมบัติพื้นที่สีขาว

แอตทริบิวต์ ช่องว่าง ใน CSS ใช้เพื่อกำหนดกฎการประมวลผลสำหรับอักขระช่องว่างของข้อความ รวมถึง: จะรวมอักขระช่องว่าง จะคงการขึ้นบรรทัดใหม่หรือไม่ และจะอนุญาตให้มีการตัดบรรทัดอัตโนมัติหรือไม่ ลักษณะการทำงานที่แตกต่างกันของค่าแอตทริบิวต์แต่ละค่าจะแสดงอยู่ในตารางต่อไปนี้:

รายการค่าแอตทริบิวต์ช่องว่าง

( หมายเหตุ : ภายใต้ CSS1/2 คุณลักษณะ white-space สามารถใช้ได้กับองค์ประกอบระดับบล็อกเท่านั้น ส่วนภายใต้ CSS 2.1 สามารถใช้ได้กับองค์ประกอบทั้งหมด)

หากเราต้องการให้องค์ประกอบคอนเทนเนอร์มีพฤติกรรมการประมวลผลช่องว่างคล้ายกับองค์ประกอบ <pre> เพียงตั้งค่าสไตล์ {white-space: pre;}

จำเป็นต้องห่อล่วงหน้า

ก่อนอื่นมาอธิบายลักษณะการทำงานของ "การตัดบรรทัดอัตโนมัติ" ในตารางด้านบน โดยหมายถึงการไหลของข้อความภายในองค์ประกอบที่ถูกพิมพ์ในทิศทางของข้อความ เมื่อการไหลของข้อความพบขอบเขตที่จำกัดการขยายอย่างต่อเนื่อง ไม่ว่าจะตัดบรรทัดหรือไม่ "ไม่อนุญาตให้มีการตัดคำ" หมายความว่าการไหลของข้อความจะล้นองค์ประกอบ

ดังนั้น บางครั้งสไตล์ {white-space: pre;} จึงไม่เป็นไปตามความคาดหวังของเรา ตัวอย่างเช่น ในบางสถานการณ์ที่ไม่ต้องการความเข้มงวดเป็นพิเศษ หรือเมื่อจัดรูปแบบข้อมูลโค้ดบางส่วนที่ไม่ละเอียดอ่อนต่อการขึ้นบรรทัดใหม่ (เช่น HTML หรือ CSS) เราไม่ต้องการให้โค้ดบรรทัดยาวในข้อมูลโค้ดทำให้เกิด องค์ประกอบคอนเทนเนอร์ให้เลื่อนในแนวนอนเพราะอ่านยาก เราหวังว่าในกรณีนี้ โค้ดขนาดยาวจะถูกตัดโดยอัตโนมัติ

ในขณะนี้ เมื่อเปรียบเทียบลักษณะพฤติกรรมที่แตกต่างกันของค่าแอตทริบิวต์แต่ละรายการในตารางด้านบน เราจะพบว่าค่าแอตทริบิวต์ก่อนห่อมีความโดดเด่น - นั่นคือสิ่งที่เราต้องการ