1. คุณตั้งค่าความกว้างของตาราง กล่าวคือ กำหนดค่าความกว้างให้กับตาราง (ค่าตัวเลข ไม่ใช่เปอร์เซ็นต์)
2. บังคับไม่ให้ตัด
div{
// white-space: ไม่มีการตัดบรรทัด ค่าเริ่มต้นปกติ nowrap บังคับให้ข้อความทั้งหมดแสดงบนบรรทัดเดียวกันจนกว่าข้อความจะสิ้นสุดหรือพบวัตถุ br
พื้นที่สีขาว: nowrap; }
ล้อม
div{
โดยอัตโนมัติ
word-break: break-word;
//word-break ตั้งค่าการบังคับแบ่งบรรทัด กฎข้อความปกติสำหรับภาษาเอเชียและที่ไม่ใช่ภาษาเอเชีย อนุญาตให้มีการแบ่งบรรทัดภายในคำ
การแบ่งคำ: ปกติ;
-
บังคับให้แบ่งบรรทัดคำภาษาอังกฤษ
div{
แบ่งคำ: แบ่งทั้งหมด;
}
3. โดยสรุป ตราบใดที่ประโยคต่อไปนี้ถูกกำหนดไว้ใน CSS ก็รับประกันได้ว่าหน้าเว็บจะไม่ถูกเปิดอีก
ตาราง {เค้าโครงตาราง: แก้ไขแล้ว;}
td(word-break: break-all; word-wrap:break-word;)
ความคิดเห็น:
1. ตารางแรก{table-layout: fixed;} สไตล์นี้จะทำให้ตารางมี!!!(เครื่องหมายอัศเจรีย์) โดยอัตโนมัติ ตัดอักขระ
2.td{word-break: break-all} โดยทั่วไปคุณสามารถใช้ประโยคนี้ได้ แต่ในบางกรณี ประโยคนี้จะยังคงแตก ดังนั้นคุณต้องเพิ่มประโยคต่อไปนี้ (word-wrap: break-word;) ก็สามารถแก้ไขได้ รูปแบบนี้ช่วยให้คำภาษาอังกฤษบางคำที่ต่อเนื่องกันในตารางสามารถตัดคำได้โดยอัตโนมัติ
http://www.knowsky.com/
(1) ไวยากรณ์:
ตัวแบ่งคำ: ปกติ |. ตัวแบ่งทั้งหมด |.
พารามิเตอร์:
ปกติ: ตามกฎข้อความของภาษาเอเชียและภาษาที่ไม่ใช่ภาษาเอเชีย อนุญาตให้ใช้ตัวแบ่งบรรทัดภายในคำ
break-all : ลักษณะการทำงานจะเหมือนกับปกติสำหรับภาษาเอเชีย อนุญาตให้แบ่งคำในบรรทัดข้อความที่ไม่ใช่ภาษาเอเชียได้เช่นกัน ค่านี้เหมาะสำหรับข้อความภาษาเอเชียที่มีข้อความที่ไม่ใช่ภาษาเอเชีย
keep-all : เหมือนกับปกติสำหรับภาษาที่ไม่ใช่เอเชียทั้งหมด สำหรับภาษาจีน เกาหลี และญี่ปุ่น ไม่อนุญาตให้ใช้การแบ่งคำ เหมาะสำหรับข้อความที่ไม่ใช่ภาษาเอเชียซึ่งมีข้อความภาษาเอเชียจำนวนเล็กน้อย
(2) ไวยากรณ์:
word-wrap: ปกติ | พารามิเตอร์ตัวแบ่งคำ
:
ปกติ: อนุญาตให้เนื้อหาทำลายขอบเขตคอนเทนเนอร์ที่ระบุ
break-word : เนื้อหาจะแตกภายในขอบเขต หากจำเป็น การแบ่งคำจะเกิดขึ้นด้วย
คำอธิบาย:
ตั้งค่าหรือดึงข้อมูลว่าจะแบ่งบรรทัดเมื่อบรรทัดปัจจุบันเกินขอบเขตของคอนเทนเนอร์ที่ระบุ
คุณลักษณะสคริปต์ที่เกี่ยวข้องคือการตัดคำ โปรดดูหนังสือเล่มอื่นที่ฉันเขียน
(3) ไวยากรณ์:
เค้าโครงตาราง: อัตโนมัติ |
พารามิเตอร์คงที่:
อัตโนมัติ: อัลกอริธึมอัตโนมัติเริ่มต้น เค้าโครงจะขึ้นอยู่กับเนื้อหาของแต่ละเซลล์ ตารางจะไม่แสดงจนกว่าจะอ่านและคำนวณแต่ละเซลล์ ช้ามาก
คงที่: อัลกอริธึมเค้าโครงคงที่ ในอัลกอริทึมนี้ เค้าโครงแนวนอนจะขึ้นอยู่กับความกว้างของตาราง ความกว้างของเส้นขอบตาราง ระยะห่างเซลล์ และความกว้างของคอลัมน์เท่านั้น และไม่เกี่ยวข้องกับเนื้อหาตาราง
:
จะทำให้ตารางห่ออัตโนมัติได้อย่างไร?
ตั้งค่าหรือดึงข้อมูลอัลกอริธึมเค้าโครงของตาราง
แอตทริบิวต์สคริปต์ที่สอดคล้องกันคือ tableLayout
4. ตามบทความส่วนใหญ่บนอินเทอร์เน็ต เพียงเพิ่ม:
รหัส
.......
รหัส:
ตาราง {<br />
ตารางเค้าโครง: แก้ไข; word-break:break-all; word-wrap:break-word;}<br />
div {ตัวแบ่งคำ: แบ่งทั้งหมด; การตัดคำ: แบ่งคำ;}
วิธีนี้สามารถแก้ปัญหาตารางและเลเยอร์ที่เสียหายได้ นี่คือสิ่งที่ฉันทำในตอนแรก อย่างไรก็ตามโค้ดดังกล่าวจะทำให้เกิดปัญหาได้ คุณจะพบว่าคำภาษาอังกฤษทั้งหมดถูกตัดทอนซึ่งไม่สอดคล้องกับนิสัยการเขียนภาษาอังกฤษและไม่เอื้อต่อการอ่าน
ต่อมา ฉันพบว่าการเขียนโค้ดด้านบนใหม่ ฉันสามารถป้องกันไม่ให้ทั้งตาราง/เลเยอร์เสียหายและคำพูดไม่แตก
ดังต่อไปนี้:
รหัสรหัส
:
โต๊ะ {
เค้าโครงตาราง: แก้ไข;
การตัดคำ: แบ่งคำ;
-
div {
การตัดคำ: แบ่งคำ;
}
นี่คือรหัสที่ฉันใช้ตอนนี้ด้วย