ทุกคนรู้ดีว่าภาษาอังกฤษหรือตัวเลขที่ต่อเนื่องกันสามารถทำให้คอนเทนเนอร์ขยายได้ และไม่สามารถตัดตามขนาดของคอนเทนเนอร์ได้โดยอัตโนมัติ ต่อไปนี้เป็นวิธีห่อคอนเทนเนอร์โดยใช้ CSS!
สำหรับดิวิชั่น
1. (เบราว์เซอร์ IE) white-space:normal; word-break:break-all; แบบแรกเป็นไปตามมาตรฐาน
#wrap{ช่องว่างสีขาว:ปกติ;
หรือ
#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด;ความกว้าง:200px;}
<div >dd1111111111111111111111111111111111</div>
ผลกระทบ: สามารถขึ้นบรรทัดใหม่ได้
2. (เบราว์เซอร์ Firefox) white-space:normal; word-break:break-all;overflow:hidden; นอกจากนี้ยังไม่มีวิธีการใช้งานที่ดีใน FF คุณสามารถซ่อนหรือเพิ่มแถบเลื่อนได้เท่านั้น แต่แน่นอนว่าไม่มีแถบเลื่อน ผลจะดีกว่า!
#wrap{ช่องว่างสีขาว:ปกติ; ความกว้าง:200px;
หรือ
#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด;ความกว้าง:200px; }
<div >ddd1111111111111111111111111111111111111111</div>
ผลกระทบ: คอนเทนเนอร์เป็นเรื่องปกติและเนื้อหาถูกซ่อนอยู่
สำหรับโต๊ะ
1. (เบราว์เซอร์ IE) ใช้รูปแบบตารางรูปแบบ: แก้ไข;
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <สไตล์> <ความกว้างของตาราง="80"> |
ผลกระทบ: สามารถทำการขึ้นบรรทัดใหม่ได้
2. (เบราว์เซอร์ IE) ใช้รูปแบบตารางรูปแบบ: แก้ไขแล้วและตอนนี้
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <สไตล์> <ความกว้างของตาราง="80"> |
ผลกระทบ: สามารถทำการขึ้นบรรทัดใหม่ได้
3. (เบราว์เซอร์ IE) ใช้ style table-layout: fix และ nowrap เมื่อใช้เปอร์เซ็นต์เพื่อแก้ไขขนาด td
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <สไตล์> <ความกว้างของตาราง=80> |
ผลกระทบ: ยานพิฆาตรถถังทั้งสองห่อกันตามปกติ
4. (เบราว์เซอร์ Firefox) ใช้ style table-layout: fix และ nowrap เมื่อใช้เปอร์เซ็นต์เพื่อแก้ไขขนาด td และใช้ div
| ต่อไปนี้เป็นเนื้อหาที่ยกมา: <สไตล์> <ความกว้างของตาราง=80> |
ต้องกำหนดความกว้างของเซลล์ที่นี่เป็นเปอร์เซ็นต์
เอฟเฟกต์: การแสดงผลปกติ แต่ไม่มีการตัดบรรทัด (หมายเหตุ: ไม่มีวิธีที่ดีในการตัดเนื้อหาคอนเทนเนอร์ภายใต้ FF คุณสามารถใช้โอเวอร์โฟลว์เพื่อซ่อนเนื้อหาเพิ่มเติมเพื่อหลีกเลี่ยงผลกระทบต่อเอฟเฟกต์โดยรวม)