div ใช้ CSS สำหรับการตัดบรรทัดตัวอักษรภาษาอังกฤษแบบยาวโดยอัตโนมัติ

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

คำจำกัดความ CSS ที่ดีที่สุดของ

โค้ดการตัดบรรทัด { เค้าโครงตาราง: แก้ไข; word-break: แบ่งทั้งหมด;
ที่นี่ล้น: ซ่อน; หรืออัตโนมัติ;
================================================== ===============

สำหรับองค์ประกอบระดับบล็อก เช่น div และ p การตัดบรรทัดขององค์ประกอบข้อความปกติ (ข้อความเอเชียและข้อความที่ไม่ใช่เอเชีย) จะมีช่องว่างสีขาวเริ่มต้น: ปกติ และจะตัดหลังความกว้างที่กำหนดโดยอัตโนมัติ
html

1. (เบราว์เซอร์ IE) สำหรับอักขระภาษาอังกฤษต่อเนื่องและตัวเลขอารบิก ให้ใช้ word-wrap: break-word; หรือ word-break:break-all; ทำลาย

#wrap {คำแบ่ง: แบ่งทั้งหมด; ความกว้าง: 200px;}
หรือ
#wrap{word-wrap:break-word; width:200px;}

ผลกระทบ: สามารถขึ้นบรรทัดใหม่ได้

2. (เบราว์เซอร์ Firefox) การแบ่งอักขระภาษาอังกฤษต่อเนื่องและเลขอารบิค Firefox ทุกเวอร์ชันไม่สามารถแก้ปัญหานี้ได้ เราสามารถซ่อนอักขระที่อยู่นอกขอบเขตหรือเพิ่มแถบเลื่อนลงในคอนเทนเนอร์ได้เท่านั้น

#wrap{word-break:break-all; width:200px; overflow:auto;}

เอฟเฟกต์: คอนเทนเนอร์เป็นเรื่องปกติและเนื้อหาถูกซ่อนไว้

สำหรับตาราง
http://www.knowsky.com/
1. (เบราว์เซอร์ IE) ใช้ table-layout:fixed; เพื่อบังคับความกว้างของตารางและซ่อนเนื้อหาส่วนเกิน

ผล: ซ่อนเนื้อหาที่ซ้ำซ้อน

2. (เบราว์เซอร์ IE) ใช้เค้าโครงตาราง: แก้ไข; เพื่อบังคับความกว้างของตาราง, td ภายใน, th ใช้ตัวแบ่งคำ: แบ่งทั้งหมดหรือตัดคำ: แบ่ง; -word ;ตัวแบ่งบรรทัด

ผลกระทบ: การตัดบรรทัดเป็นไปได้

3. (เบราว์เซอร์ IE) การซ้อน div, p ฯลฯ ใน td, th ใช้วิธีการตัดบรรทัดของ div และ p ที่กล่าวถึงข้างต้น

4. (เบราว์เซอร์ Firefox) ใช้เค้าโครงตาราง: แก้ไขแล้ว ;การบังคับความกว้างของตาราง td ภายใน th ใช้ word-break: break-all; หรือ word-wrap: break-word; เพื่อตัดบรรทัด ให้ใช้ overflow:hidden เพื่อซ่อนเนื้อหาส่วนเกิน, overflow:auto ; ใช้งานไม่ได้ที่นี่

ผล: ซ่อนมากกว่าเนื้อหา

5 (เบราว์เซอร์ Firefox) Nest div, p, ฯลฯ ใน td, th ใช้วิธีที่กล่าวถึงข้างต้นเพื่อจัดการกับ Firefox เพื่อเรียกใช้กล่องรหัส ในที่สุดโอกาสของปรากฏการณ์นี้ ที่เกิดขึ้นมีน้อยมาก แต่การแกล้งกันโดยชาวเน็ตไม่สามารถตัดออกได้

ต่อไปนี้เป็นผลจากตัวอย่างที่กล่าวถึง

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional ดีทีดี ">
http://www.w3.org/1999/xhtml ">
<หัว>