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