บทความนี้แสดงรายการสไตล์ CSS ที่แนะนำสำหรับการขึ้นบรรทัดใหม่ที่เข้ากันได้กับ IE และ FF และแนะนำรายละเอียดความแตกต่างระหว่างการตัดคำและการแบ่งคำ สไตล์ CSS ที่แนะนำสำหรับการขึ้นบรรทัดใหม่ที่เข้ากันได้กับ IE และ FF:
วิธีที่ดีที่สุดคือ
word-wrap:
break-word
; overflow:
break
-word
; ไม่มีปัญหาใน IE ภายใต้ FF คำภาษาอังกฤษที่ยาวจะถูกบล็อก
สรุปทางเทคนิค:
การตัดคำถูกใช้เพื่อควบคุมการแบ่งบรรทัด
เมื่อใช้ตัวแบ่งบรรทัด ไม่มีปัญหากับภาษาจีน และไม่มีปัญหากับประโยคภาษาอังกฤษ แต่หากคุณสตริงคำภาษาอังกฤษ มัน
จะ
ไม่
ทำงาน
เมื่อคำถึงขอบเขตตัวอักษรถัดไปจะไปที่บรรทัดถัดไปโดยอัตโนมัติ กล่าวคือ
ใช้เฉพาะคำ
ที่ยาวเท่านั้นคราวนี้ถ้าไม่มีการตัดคำและภาษาจีนจะไม่ตัดคำ (ประโยคภาษาอังกฤษเป็นเรื่องปกติ .)
ภายใต้ IE:
ใช้ word-wrap:break-word; ทุกอย่างเป็นเรื่องปกติ
ภายใต้ FireFox:
หากไม่ได้ใช้ทั้งสองนี้ ประโยคภาษาอังกฤษจะไม่มีปัญหา อย่างไรก็ตาม ประโยคภาษาอังกฤษจะมีปัญหาใน
การแก้ประโยคภาษาอังกฤษแบบยาว word-wrap:break-word;word-break:break-all โดยทั่วไปจะใช้วิธีนี้ อย่างไรก็ตาม วิธีนี้จะทำให้คำในประโยคภาษาอังกฤษธรรมดาขาดหายไป (IE ด้านล่างก็เช่นเดียวกัน)
ปัญหาหลักในปัจจุบันคือสายยาวของคำภาษาอังกฤษและภาษาอังกฤษถูกตัดการเชื่อมต่อ สตริงภาษาอังกฤษเป็นเพียงคำที่ค่อนข้างยาว กล่าวคือ ควรตัดคำภาษาอังกฤษออกหรือไม่ ปัญหานั้นชัดเจน และเห็นได้ชัดว่าไม่ควรถูกตัดการเชื่อมต่อ สำหรับสตริงยาวๆ ของภาษาอังกฤษ ซึ่งเป็นสิ่งที่เป็นอันตราย ย่อมไม่จำเป็นต้องกังวลเกี่ยวกับเรื่องนี้ อย่างไรก็ตาม เราต้องคิดถึงวิธีบางอย่างเพื่อป้องกันไม่ให้ขยายคอนเทนเนอร์ด้วย .
Use: overflow: auto; ภายใต้ IE สตริงที่ยาวจะถูกตัดโดยอัตโนมัติ ภายใต้ FireFox
ดังนั้น โดยสรุป วิธีที่ดีที่สุดคือ word-wrap:break-word;overflow:hidden wrap:break -word;word-break:break-all;.
word-wrap:break-word;overflow:auto; ไม่มีปัญหาใน IE ภายใต้ FireFox ส่วนหนึ่งของสตริงยาวจะถูกบดบัง