เรียนรู้วิธีทำให้แท็กล่วงหน้า HTML ของคุณตอบสนองอย่างรวดเร็ว 100% โดยการเพิ่มคุณสมบัติ CSS สองสามอย่าง
ปัญหาที่ฉันมักพบในเว็บไซต์บทช่วยสอนอื่นๆ คือ ข้อมูลโค้ดขนาดยาว (ซึ่งหุ้มด้วย pre แท็ก) ล้นความกว้างของหน้า และทำให้เค้าโครงหน้าของหน้าขาด
สิ่งนี้เกิดขึ้นเพราะโดยค่าเริ่มต้น pre แท็กมี CSS white-space ตั้งค่าคุณสมบัติเป็น normal เช่นนี้:
pre {
white-space: normal;
}
ในการแก้ไขปัญหา คุณเพียงแค่เปลี่ยน normal ไปที่ pre-wrap :
pre {
white-space: pre-wrap;
}
นี่เป็นการปรับปรุงที่ดี แต่ไม่สามารถแก้ปัญหาโอเวอร์โฟลว์ได้ทั้งหมด เนื่องจาก pre-wrap ระบุเฉพาะโค้ดทั้งบรรทัด (ชุดของเงื่อนไขโค้ดในบรรทัด คั่นด้วยช่องว่าง)
จะเกิดอะไรขึ้นหากแต่ละคำในบรรทัดโค้ดของคุณยาวจนเกินความกว้างของหน้า
เลย์เอาต์ของคุณก็ยังพังเพราะ pre-wrap ไม่ได้กล่าวถึงคำแต่ละคำ
ตัวอย่างที่ดีคือเส้นทางไดเรกทอรีที่มีความยาวเกิน 50 อักขระ ซึ่งกว้างเกินไปสำหรับรูปแบบต่างๆ โดยเฉพาะบนมือถือ นี่คือตัวอย่างจากคอมพิวเตอร์ของฉันเอง:
cd /Users/david/Dev/techstacker/content/posts/how-to-make-seo-friendly-urls/how-to-make-seo-friendly-urls.md
เนื่องจากไม่มีช่องว่างระหว่างคำในบรรทัดด้านบน จึงอ่านว่า หนึ่ง คำยาวโดยเบราว์เซอร์ของคุณ หากมีการคั่นด้วยช่องว่างระหว่างแต่ละคำ มันก็จะตัดได้ดีเพราะ pre-wrap ทรัพย์สินที่เราเพิ่งพูดถึง แต่อ่านแล้วยาวเป็นคำเดียว
ในการแก้ไขปัญหานี้ เราได้เพิ่มคุณสมบัติ CSS อื่นในแท็กก่อน เรียกว่า word-break และให้ค่า break-all . ชอบสิ่งนี้:
pre {
white-space: pre-wrap;
word-break: break-all;
}ตอนนี้แท็กล่วงหน้าของคุณตอบสนองได้ 100%
