แก้ปัญหาตัวเลขและตัวอักษรทำให้ภาชนะมีขนาดใหญ่ขึ้น

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

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

ซีเอสเอส
#wrap{ช่องว่างสีขาว:ปกติ;

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

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

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

#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด; ความกว้าง:200px;

ผลกระทบ: คอนเทนเนอร์เป็นเรื่องปกติและเนื้อหาถูกซ่อนไว้สำหรับตาราง
(1)(เบราว์เซอร์ IE) ใช้ table-layout:fixed; บังคับความกว้างของตารางและซ่อนเนื้อหาส่วนเกิน





ผลกระทบ: ซ่อนเนื้อหาที่ซ้ำซ้อน
(2) (เบราว์เซอร์ IE) ใช้ table-layout: แก้ไข; เพื่อบังคับความกว้างของตาราง, td ภายใน, ใช้ word-break: break-all; หรือ word-wrap: break-word;

abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssss

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

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

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

abcdefghigklmnopqrstuvwxyz 1234567890

abcdefghigklmnopqrstuvwxyz 1234567890

เอฟเฟกต์: ซ่อนมากกว่าเนื้อหา

5. (เบราว์เซอร์ Firefox) Nest div, p ฯลฯ ใน td, th ฯลฯ ใช้วิธีที่กล่าวข้างต้นเพื่อจัดการกับ Firefox

abcdefghigklmnopqrstuvwxyz1234567890

abcdefghigklmnopqrstuvwxyz1234567890