ใช้ CSS เพื่อตัดข้อความภาษาอังกฤษโดยอัตโนมัติ

ผู้เขียน：Eve Cole เวลาอัปเดต：2025-01-17 13:27:03

<body style="direction: ltr;" leftmargin="2" topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart="return false" onselect="document.selection.empty()" คัดลอก ="document.selection.empty()" onbeforecopy="return false" onmouseup="document.selection.empty()" ความสูงขอบ = "0" marginwidth="0">กำจัดโปรแกรมคัดลอกคลิกขวา

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

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

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

1. (เบราว์เซอร์ IE) white-space:normal; word-break:break-all;

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
#wrap{ช่องว่างสีขาว:ปกติ;

หรือ:

#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด;ความกว้าง:200px;}
<div id="wrap">ddd111111111111111111111111111111</div>

ผลกระทบ: สามารถตัดบรรทัดอัตโนมัติได้

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

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
#wrap{ช่องว่างสีขาว:ปกติ; ความกว้าง:200px;

หรือ:

#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด;ความกว้าง:200px; }
<div id="wrap">ddd111111111111111111111111111111111111111</div>

ผลกระทบ: คอนเทนเนอร์เป็นเรื่องปกติและเนื้อหาถูกซ่อนอยู่
http://font.knowsky.com/
สำหรับโต๊ะ

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

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
<สไตล์>
.tb {ตารางเค้าโครง: แก้ไข}
</สไตล์>
<ตารางคลาส="tbl" width="80">
<tr><td>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</ตาราง>

เอฟเฟกต์: ตัดเส้นโดยอัตโนมัติ

2. รูปแบบการใช้งาน (เบราว์เซอร์ IE):

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
<สไตล์>
.tb {รูปแบบตาราง: แก้ไขแล้ว}
</สไตล์>
<table class="tb" width="80"><tr><td nowrap>
abcdefghigklmnopqrstuvwxyz 1234567890
</td></tr>
</ตาราง>

เอฟเฟกต์: ตัดเส้นโดยอัตโนมัติ

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

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
<สไตล์>
.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:

div css xhtml xml ตัวอย่างซอร์สโค้ด ตัวอย่างซอร์สโค้ด [www.52css.com]
<สไตล์>
.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>
</ตาราง>

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