เราทุกคนรู้ดีว่าแท็ก <pre> สามารถกำหนดข้อความที่จัดรูปแบบไว้ล่วงหน้าได้ และแอปพลิเคชันทั่วไปคือเพื่อแสดงซอร์สโค้ดของคอมพิวเตอร์ ข้อความที่อยู่ในองค์ประกอบ pre มักจะยังคงมีช่องว่างและการขึ้นบรรทัดใหม่ แต่น่าเสียดายที่เมื่อคุณเขียนโค้ดภายในแท็ก <pre> หากคุณไม่ล้อมบรรทัดใหม่ด้วยตนเอง ข้อความนั้นจะยังคงอยู่สำหรับคุณแทนการขึ้นบรรทัดใหม่
ในขณะนี้ คุณสามารถใช้ overflow:auto; (เมื่อโค้ดเกินขอบเขตของคอนเทนเนอร์ กล่องเลื่อนจะปรากฏขึ้น) แต่วิธีนี้ไม่เหมาะกับเบราว์เซอร์กระแสหลักทั้งหมด และเบราว์เซอร์บางตัวจะตัดทอนเนื้อหาที่เกินโดยตรง
เนื่องจากมีสถานที่ไม่กี่แห่งที่ใช้ซอร์สโค้ดบนไซต์นี้ ฉันจึงไม่สนใจปัญหานี้มาก่อน ไม่นานมานี้ ชาวเน็ตผู้กระตือรือร้นรายงานปัญหานี้ใน QQ ดังนั้นเมื่อฉันเปลี่ยนธีมในครั้งนี้ ฉันจึงดู เพื่อหาแนวทางแก้ไขและแบ่งปัน
| ก่อน { ช่องว่างสีขาว: ก่อนห่อ; /* css-3 */ white-space: -moz-pre-wrap; /* Mozilla ตั้งแต่ปี 1999 */ พื้นที่สีขาว: -pre-wrap; /* Opera 4-6 */ พื้นที่สีขาว: -o-pre-wrap; /* Opera 7 */ การตัดคำ: แบ่งคำ; /* Internet Explorer 5.5+ */ } |
โซลูชัน CSS นี้สามารถทำให้ข้อความในแท็กล่วงหน้าตัดคำได้โดยอัตโนมัติ ฉันทดสอบกับเบราว์เซอร์ทั้งหมดที่ฉันมี และรองรับ IE6, IE7, IE8, Firefox, Opera, Safari และ Chrome
มันจะอยู่นอกขอบเขตก็ต่อเมื่อคุณย่อขนาดหน้าต่างให้เหลือความกว้างน้อยกว่า 20 อักขระ