ทุกคนรู้ดีว่าภาษาอังกฤษหรือตัวเลขที่ต่อเนื่องกันสามารถทำให้คอนเทนเนอร์ขยายได้ และไม่สามารถตัดตามขนาดของคอนเทนเนอร์ได้โดยอัตโนมัติ ต่อไปนี้เป็นวิธีห่อคอนเทนเนอร์โดยใช้ CSS!
สำหรับ div
1 (เบราว์เซอร์ IE) white-space:normal; word-break:break-all; ที่นี่แบบแรกเป็นไปตามมาตรฐาน
#wrap{ช่องว่างสีขาว:ปกติ;
หรือ
#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด;ความกว้าง:200px;}
<div id="wrap">ddd111111111111111111111111111</div>
เอฟเฟกต์: สามารถขึ้นบรรทัดใหม่ได้
2. (เบราว์เซอร์ Firefox) white-space:normal; word-break:break-all;overflow:hidden; วิธีการใช้งานที่ดีคือการซ่อนหรือเพิ่มแถบเลื่อน แน่นอนว่าไม่ควรเพิ่มแถบเลื่อน!
#wrap{ช่องว่างสีขาว:ปกติ; ความกว้าง:200px;
หรือ
#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด;ความกว้าง:200px; }
<div id="wrap">ddd11111111111111111111111111111111111111</div>
เอ
ฟเฟกต์: คอนเทนเนอร์เป็นเรื่องปกติและเนื้อหาถูกซ่อนไว้
สำหรับตาราง
ที่ 1 (เบราว์เซอร์ IE) ให้ใช้ style table-layout:fixed;
.tb {ตารางเค้าโครง: แก้ไข}
</สไตล์>
<ตารางคลาส="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
ผลกระทบ: สามารถตัดบรรทัดได้
http://www.knowsky.com/
2. (เบราว์เซอร์ IE) ใช้สไตล์
<style>
.tb {รูปแบบตาราง: แก้ไขแล้ว}
</สไตล์>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</table>
เอฟเฟกต์: สามารถตัด
3 ได้ (เบราว์เซอร์ IE) ใช้ style table-layout:fixed และ nowrap<style>
เมื่อใช้เปอร์เซ็นต์เพื่อแก้ไขขนาด td
.tb {ตารางเค้าโครง: แก้ไข}
</สไตล์>
<table class="tb" width=80>
<tr>
<td width=25% ตอนนี้ห่อ>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</table>
ผลกระทบ: ทั้งสอง tds ตัดตามปกติ
4. (เบราว์เซอร์ Firefox) ใช้รูปแบบตารางเค้าโครง: แก้ไขแล้วและทันทีเมื่อใช้เปอร์เซ็นต์เพื่อแก้ไขขนาด td และใช้ div
<style>
.tb {รูปแบบตาราง: แก้ไขแล้ว}
.td {ล้น: ซ่อน;}
</สไตล์>
<คลาสตาราง=ความกว้าง tb=80>
<tr><td width=25% class=td ตอนนี้ห่อ>
<div>abcdefghigklmnopqrstuvwxyz 1234567890</div>
</td>
<td class=td nowrap><div>abcdefghigklmnopqrstuvwxyz 1234567890</div></td>
</tr>
</table>
ความกว้างของเซลล์จะต้องกำหนดเป็นเปอร์เซ็นต์ ผลลัพธ์คือ: การแสดงผลปกติ แต่ไม่มีการตัดบรรทัด
หมายเหตุ: ไม่มีวิธีที่ดีในการรวมเนื้อหาคอนเทนเนอร์ภายใต้ FF คุณสามารถใช้โอเวอร์โฟลว์เพื่อซ่อนเนื้อหาเพิ่มเติมเพื่อหลีกเลี่ยงผลกระทบต่อผลกระทบโดยรวม