CSS ควบคุมการตัดข้อความ

1. คุณตั้งค่าความกว้างของตาราง กล่าวคือ กำหนดค่าความกว้างให้กับตาราง (ค่าตัวเลข ไม่ใช่เปอร์เซ็นต์)
2. ห้ามเว้นบรรทัด

div{
// white-space: ไม่มีการตัดบรรทัด ค่าเริ่มต้นปกติ nowrap บังคับให้ข้อความทั้งหมดแสดงบนบรรทัดเดียวกันจนกว่าข้อความจะสิ้นสุดหรือพบวัตถุ br
พื้นที่สีขาว: nowrap; }

การตัดบรรทัดอัตโนมัติ

div{
การตัดคำ: แบ่งคำ;

//ตัวแบ่งคำจะกำหนดกฎการขึ้นบรรทัดใหม่สำหรับภาษาเอเชียและที่ไม่ใช่ภาษาเอเชีย โดยอนุญาตให้มีการขึ้นบรรทัดใหม่ภายในคำต่างๆ
การแบ่งคำ: ปกติ;
-

การแบ่งบรรทัดบังคับสำหรับคำภาษาอังกฤษ

div{
แบ่งคำ: แบ่งทั้งหมด;
-

3. โดยสรุป ตราบใดที่ประโยคต่อไปนี้ถูกกำหนดไว้ใน CSS ก็รับประกันได้ว่าจะไม่เปิดหน้าเว็บอีก

ตาราง {เค้าโครงตาราง: แก้ไขแล้ว;}
td (ตัวแบ่งคำ: แบ่งทั้งหมด; การตัดคำ: แบ่งคำ;)

บันทึก:

1. ตารางแรก{table-layout: fixed;} สไตล์นี้จะทำให้ตารางตัดคำโดยอัตโนมัติเมื่อมีอักขระ เช่น !!! (เครื่องหมายอัศเจรีย์)

2.td{word-break: break-all} โดยทั่วไปคุณสามารถใช้ประโยคนี้ได้ แต่ในบางกรณี ประโยคนี้จะยังคงแตก ดังนั้นคุณต้องเพิ่มประโยคต่อไปนี้ (word-wrap: break-word;) ก็สามารถแก้ไขได้ รูปแบบนี้ช่วยให้คำภาษาอังกฤษบางคำที่ต่อเนื่องกันในตารางสามารถตัดคำได้โดยอัตโนมัติ
(1) ไวยากรณ์:

ตัวแบ่งคำ: ปกติ | . แบ่งทั้งหมด |

พารามิเตอร์:

ปกติ : อนุญาตให้มีการขึ้นบรรทัดใหม่ภายในคำตามกฎข้อความสำหรับภาษาเอเชียและที่ไม่ใช่ภาษาเอเชีย
break-all : ลักษณะการทำงานจะเหมือนกับปกติสำหรับภาษาเอเชีย อนุญาตให้แบ่งคำในบรรทัดข้อความที่ไม่ใช่ภาษาเอเชียได้เช่นกัน ค่านี้เหมาะสำหรับข้อความภาษาเอเชียที่มีข้อความที่ไม่ใช่ภาษาเอเชีย
keep-all : เหมือนกับปกติสำหรับภาษาที่ไม่ใช่เอเชียทั้งหมด สำหรับภาษาจีน เกาหลี และญี่ปุ่น ไม่อนุญาตให้ใช้การแบ่งคำ เหมาะสำหรับข้อความที่ไม่ใช่ภาษาเอเชียซึ่งมีข้อความภาษาเอเชียจำนวนเล็กน้อย

(2) ไวยากรณ์:

การตัดคำ : ปกติ |

พารามิเตอร์:

ปกติ: อนุญาตให้เนื้อหาขยายเกินขอบเขตคอนเทนเนอร์ที่ระบุ
break-word : เนื้อหาจะแตกภายในขอบเขต หากจำเป็น อาจเกิดการแตกคำได้เช่นกัน

แสดงให้เห็น:

ตั้งค่าหรือดึงข้อมูลว่าจะแบ่งบรรทัดเมื่อบรรทัดปัจจุบันเกินขอบเขตของคอนเทนเนอร์ที่ระบุหรือไม่
คุณลักษณะสคริปต์ที่เกี่ยวข้องคือการตัดคำ โปรดดูหนังสือเล่มอื่นที่ฉันเขียน
(3) ไวยากรณ์:

เค้าโครงตาราง : auto | คงที่

พารามิเตอร์:

อัตโนมัติ: อัลกอริธึมอัตโนมัติเริ่มต้น เค้าโครงจะขึ้นอยู่กับเนื้อหาของแต่ละเซลล์ ตารางจะไม่แสดงจนกว่าจะอ่านและคำนวณแต่ละเซลล์ ช้ามาก
คงที่: อัลกอริธึมเค้าโครงคงที่ ในอัลกอริทึมนี้ เค้าโครงแนวนอนจะขึ้นอยู่กับความกว้างของตาราง ความกว้างของเส้นขอบตาราง ระยะห่างเซลล์ และความกว้างของคอลัมน์เท่านั้น และไม่เกี่ยวข้องกับเนื้อหาตารางเลย

แสดงให้เห็น:
จะทำให้ตารางห่ออัตโนมัติได้อย่างไร?
ตั้งค่าหรือดึงข้อมูลอัลกอริธึมเค้าโครงของตาราง
แอตทริบิวต์สคริปต์ที่สอดคล้องกันคือ tableLayout

4. ตามบทความส่วนใหญ่บนอินเทอร์เน็ต เพียงเพิ่ม:
รหัส
-

รหัส:
ตาราง {<br />
ตารางเค้าโครง: แก้ไข; word-break:break-all; word-wrap:break-word;}<br />
div {ตัวแบ่งคำ: แบ่งทั้งหมด; การตัดคำ: แบ่งคำ;}
วิธีนี้สามารถแก้ปัญหาตารางและเลเยอร์ที่เสียหายได้ นี่คือสิ่งที่ฉันทำในตอนแรก อย่างไรก็ตามโค้ดดังกล่าวจะทำให้เกิดปัญหาได้ คุณจะพบว่าคำภาษาอังกฤษทั้งหมดถูกตัดทอนซึ่งไม่สอดคล้องกับนิสัยการเขียนภาษาอังกฤษและไม่เอื้อต่อการอ่าน

ต่อมา ฉันพบว่าการเขียนโค้ดด้านบนใหม่ ฉันสามารถป้องกันไม่ให้ทั้งตาราง/เลเยอร์เสียหายและคำพูดไม่แตก
ดังต่อไปนี้:
รหัส

รหัส:
โต๊ะ {
เค้าโครงตาราง: แก้ไข;
การตัดคำ: แบ่งคำ;
-
div {
การตัดคำ: แบ่งคำ;
-

นี่คือรหัสที่ฉันใช้ตอนนี้ด้วย