เคล็ดลับในการสร้างการตัดบรรทัดอัตโนมัติด้วย CSS

ทุกคนรู้ดีว่าภาษาอังกฤษหรือตัวเลขที่ต่อเนื่องกันสามารถทำให้คอนเทนเนอร์ขยายได้ และไม่สามารถตัดตามขนาดของคอนเทนเนอร์ได้โดยอัตโนมัติ ต่อไปนี้เป็นวิธีห่อคอนเทนเนอร์โดยใช้ CSS!

สำหรับดิวิชั่น

1. (เบราว์เซอร์ IE) white-space:normal; word-break:break-all; แบบแรกเป็นไปตามมาตรฐาน

#wrap{ช่องว่างสีขาว:ปกติ;
หรือ
#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด;ความกว้าง:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>

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

2. (เบราว์เซอร์ Firefox) white-space:normal; word-break:break-all;overflow:hidden; ไม่มีวิธีการใช้งานที่ดีภายใต้ FF เดียวกัน คุณสามารถซ่อนหรือเพิ่มแถบเลื่อนได้เท่านั้น แต่แน่นอนว่าไม่มีแถบเลื่อน . ผลจะดีกว่า!

#wrap{ช่องว่างสีขาว:ปกติ; ความกว้าง:200px;
หรือ
#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด;ความกว้าง:200px; }
<div id="wrap">ddd111111111111111111111111111111111111111</div>

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

สำหรับโต๊ะ

1. (เบราว์เซอร์ IE) ใช้รูปแบบ table-layout:fixed;

<สไตล์>
.tb {ตารางเค้าโครง: แก้ไข}
</สไตล์>
<ตารางคลาส="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</ตาราง>

เอฟเฟกต์: สามารถตัดบรรทัดได้ 2. (เบราว์เซอร์ IE) ใช้สไตล์

<สไตล์>
.tb {รูปแบบตาราง: แก้ไขแล้ว}
</สไตล์>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</ตาราง>

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

3. (เบราว์เซอร์ IE) ใช้ style table-layout: fix และ nowrap เมื่อใช้เปอร์เซ็นต์เพื่อแก้ไขขนาด td

<สไตล์>
.tb {ตารางเค้าโครง: แก้ไข}
</สไตล์>
<ตารางคลาส="tb" ความกว้าง=80>
<tr>
<td width=25% ตอนนี้ห่อ>
abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td nowrap>abcdefghigklmnopqrstuvwxyz 1234567890</td>
</tr>
</ตาราง>

ผลกระทบ: ยานพิฆาตรถถังทั้งสองห่อกันตามปกติ

4. (เบราว์เซอร์ Firefox) ใช้ style table-layout: fix และ nowrap เมื่อใช้เปอร์เซ็นต์เพื่อแก้ไขขนาด td และใช้ div

<สไตล์>
.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>
</ตาราง>

ต้องกำหนดความกว้างของเซลล์ที่นี่เป็นเปอร์เซ็นต์ โดยจะแสดงตามปกติ แต่ไม่สามารถตัดคำได้

หมายเหตุ: ไม่มีวิธีที่ดีในการรวมเนื้อหาคอนเทนเนอร์ภายใต้ FF คุณสามารถใช้โอเวอร์โฟลว์เพื่อซ่อนเนื้อหาเพิ่มเติมเพื่อหลีกเลี่ยงผลกระทบต่อผลกระทบโดยรวม