ปัญหาการตัดบรรทัดอัตโนมัติ การตัดบรรทัดของอักขระปกตินั้นสมเหตุสมผลมากกว่า แต่ตัวเลขที่ต่อเนื่องและอักขระภาษาอังกฤษมักจะขยายคอนเทนเนอร์ ซึ่งค่อนข้างน่าปวดหัว ต่อไปนี้คือวิธีการใช้การตัดบรรทัดใน CSS CSS ที่ดีที่สุดในการกำหนดตัวแบ่งบรรทัด .wrap { ตารางเค้าโครง: แก้ไขคำแบ่ง: แบ่งทั้งหมด; ล้น; 1. (เบราว์เซอร์ IE) สำหรับอักขระภาษาอังกฤษและตัวเลขอารบิกต่อเนื่อง ให้ใช้ word-wrap: break-word; หรือ word-break:break-all; #wrap{ตัวแบ่งคำ:แบ่งทั้งหมด; ความกว้าง:200px;} <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> ผลกระทบ: สามารถขึ้นบรรทัดใหม่ได้ 2. (เบราว์เซอร์ Firefox) การขึ้นบรรทัดใหม่ของอักขระภาษาอังกฤษและตัวเลขอารบิกอย่างต่อเนื่อง Firefox ทุกเวอร์ชันไม่สามารถแก้ปัญหานี้ได้ เราสามารถซ่อนอักขระที่เกินขอบเขตหรือเพิ่มแถบเลื่อนลงในคอนเทนเนอร์ได้ <div id="wrap">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div> ผลกระทบ: คอนเทนเนอร์เป็นเรื่องปกติและเนื้อหาถูกซ่อนอยู่ สำหรับโต๊ะ <table style="table-layout:fixed" width="200"> ผลกระทบ: ซ่อนเนื้อหาที่ซ้ำซ้อน 2. (เบราว์เซอร์ IE) ใช้ table-layout: fixed; เพื่อบังคับความกว้างของตาราง และ td ภายใน th ใช้ word-break: break-all; หรือ word-wrap: break-word; <table width="200" style="table-layout:fixed;"> ผลกระทบ: สามารถทำการขึ้นบรรทัดใหม่ได้ 3. (เบราว์เซอร์ IE) เมื่อซ้อน div, p ฯลฯ ใน td, th ให้ใช้วิธีการตัดบรรทัดของ div และ p ที่กล่าวถึงข้างต้น 4. (เบราว์เซอร์ Firefox) ใช้ table-layout: แก้ไข; เพื่อบังคับความกว้างของตาราง, td ภายใน, th ใช้ word-break: break-all; หรือ word-wrap: break-word; ซ่อนไว้ เพื่อซ่อนนอกเหนือจากเนื้อหา ล้น: อัตโนมัติ; เอฟเฟกต์: ซ่อนมากกว่าเนื้อหา 5. (เบราว์เซอร์ Firefox) Nest div, p, ฯลฯ. ใน td, th, ฯลฯ. ใช้วิธีที่กล่าวข้างต้นเพื่อจัดการกับ Firefox เพื่อเรียกใช้กล่องโค้ด สุดท้ายนี้ โอกาสที่ปรากฏการณ์นี้จะเกิดขึ้นมีน้อยมาก แต่ชาวเน็ต การเล่นแผลง ๆ ไม่สามารถตัดออกได้ ต่อไปนี้คือผลของตัวอย่างที่กล่าวถึง <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <h1><code>IE word-wrap : ตัวแบ่งคำ ;</code></h1> <h1><code>Firefox/ word-break:break-all; overflow:auto;</code></h1>
ที่นี่ล้น: ซ่อน; หรืออัตโนมัติ;
================================================== ===============
สำหรับองค์ประกอบระดับบล็อก เช่น div และ p การตัดบรรทัดขององค์ประกอบข้อความปกติ (ข้อความเอเชียและข้อความที่ไม่ใช่เอเชีย) จะมีช่องว่างสีขาวเริ่มต้น: ปกติ และจะตัดหลังความกว้างที่กำหนดโดยอัตโนมัติ
html
<div id="wrap">องค์ประกอบการตัดข้อความปกติ (ข้อความเอเชียและไม่ใช่เอเชีย) มีค่าเริ่มต้น white-space:normal เมื่อกำหนด</div>
ซีเอสเอส
#wrap{ช่องว่างสีขาว:ปกติ;
หรือ
#wrap{ตัดคำ:แบ่งคำ; ความกว้าง:200px;}
#wrap{ตัวแบ่งคำ:แบ่งทั้งหมด; ความกว้าง:200px;
1. (เบราว์เซอร์ IE) ใช้ table-layout:fixed; เพื่อบังคับความกว้างของตารางและซ่อนเนื้อหาส่วนเกิน
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890sssssssssssssss
</td>
</tr>
</ตาราง>
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz 1234567890
</td>
</tr>
</ตาราง>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</ตาราง>
<html xmlns="http://www.w3.org/1999/xhtml">
<หัว>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>การตัดบรรทัดอักขระ</title>
<style type="text/css">
ตาราง, td, th, div { เส้นขอบ: 1px ทึบสีเขียว;}
รหัส { ตระกูลแบบอักษร: "Courier New", Courier, monospace;}
</สไตล์>
</หัว>
<ร่างกาย>
<h1><รหัส>div</code></h1>
<h1><code>ช่องว่างทั้งหมด:ปกติ;</code></h1>
<div style="white-space:normal; width:200px;">Wordwrap ยังคงเกิดขึ้นในองค์ประกอบ td ที่มีแอตทริบิวต์ WIDTH ตั้งค่าเป็นค่าที่เล็กกว่าเนื้อหาที่ยังไม่ได้ห่อของเซลล์ แม้ว่าคุณสมบัติ noWrap จะถูกตั้งค่าเป็น จริง ดังนั้นแอตทริบิวต์ WIDTH จะมีความสำคัญเหนือกว่าคุณสมบัติ noWrap ในสถานการณ์นี้</div>
<div style="word-wrap : break-word ; width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><code>IE word-break:break-all;</code></h1>
<div style="word-break:break-all;width:200px;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<div style="word-break:break-all; width:200px; overflow:auto;">abcdefghijklmnabcdefghijklmnabcdefghijklmn111111111</div>
<h1><รหัส>ตาราง</code></h1>
<h1><code>รูปแบบตาราง:คงที่;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td>abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
</tr>
</ตาราง>
<h1><code>table-layout:fixed; word-break : break-all; word-wrap : break-word ;</code></h1>
<table width="200" style="table-layout:fixed;">
<tr>
<td width="25%" style="word-break : break-all; ">abcdefghigklmnopqrstuvwxyz1234567890ssssssssssssss</td>
<td style="word-wrap : break-word ;">abcdefghigklmnopqrstuvwxyz1234567890sssssssssssss</td>
</tr>
</ตาราง>
<h1><code>FF table-layout:fixed; overflow:hidden;</code></h1>
<table style="table-layout:fixed" width="200">
<tr>
<td width="25%" style="word-break : break-all; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
<td width="75%" style="word-wrap : break-word; overflow:hidden; ">abcdefghigklmnopqrstuvwxyz1234567890</td>
</tr>
</ตาราง>
</ร่างกาย>
</html>