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

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

สำหรับองค์ประกอบระดับบล็อก เช่น div และ p การตัดบรรทัดขององค์ประกอบข้อความปกติ (ข้อความเอเชียและข้อความที่ไม่ใช่เอเชีย) จะมีช่องว่างสีขาวเริ่มต้น: ปกติ และจะตัดหลังความกว้างที่กำหนดโดยอัตโนมัติ
html
<div id="wrap">องค์ประกอบการตัดข้อความปกติ (ข้อความเอเชียและไม่ใช่เอเชีย) มีค่าเริ่มต้น white-space:normal เมื่อกำหนด</div>
ซีเอสเอส
#wrap{ช่องว่างสีขาว:ปกติ;

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

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

#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด; ความกว้าง:200px;
<div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
ผลกระทบ: คอนเทนเนอร์เป็นเรื่องปกติและเนื้อหาถูกซ่อนไว้สำหรับตาราง
(1)(เบราว์เซอร์ IE) ใช้ table-layout:fixed; บังคับความกว้างของตารางและซ่อนเนื้อหาส่วนเกิน
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssss
</td>
</tr>
</ตาราง>
ผลกระทบ: ซ่อนเนื้อหาที่ซ้ำซ้อน
(2) (เบราว์เซอร์ IE) ใช้ table-layout: แก้ไข; เพื่อบังคับความกว้างของตาราง, td ภายใน, ใช้ word-break: break-all; หรือ word-wrap: break-word;
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</ตาราง>
ผลกระทบ: สามารถทำการขึ้นบรรทัดใหม่ได้

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

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

<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</ตาราง>
เอฟเฟกต์: ซ่อนมากกว่าเนื้อหา

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