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