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