วิธีใช้ CSS แก้ปัญหาการขึ้นบรรทัดอัตโนมัติของคำภาษาอังกฤษ

ป้องกันไม่ให้โต๊ะ/ชั้นแตกและคำพูดไม่แตก

เรียกได้ว่าปัญหาการขึ้นบรรทัดอัตโนมัติของคำภาษาอังกฤษสร้างความทรมานให้กับใครหลายๆ คน ถ้าเขียนคำนานๆ โต๊ะจะพัง และถ้าดูแลให้ดี คำภาษาอังกฤษก็จะแตกกระจาย

หลายๆ คนได้หยิบยกประเด็นเรื่อง

การป้องกันไม่ให้โต๊ะพัง

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

ตาราง {

ตารางเค้าโครง: แก้ไข; word-break:break-all; word-wrap:break-word;}

div {word-break:break-all; word-wrap:break-word;}

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

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

รหัส

{
เค้าโครงตาราง: แก้ไข;
การตัดคำ: แบ่งคำ;
-
div {
การตัดคำ: แบ่งคำ;
-
http://font.knowsky.com/

นี่คือโค้ดที่ฉันใช้ตอนนี้ด้วย
-------------------------------------------------- -------------------------------------------------- ---

ตาม

เวอร์ชันแบ่งคำด้วยตนเองภาษาจีน CSS2 ของ Rainer Su: การสืบทอดแอตทริบิวต์ที่เป็นกรรมสิทธิ์ของ IE5 +: ใช่ ไวยากรณ์:
ตัวแบ่งคำ: ปกติ | . แบ่งทั้งหมด |
ค่า:
ปกติ: ค่าเริ่มต้น อนุญาตให้แบ่งบรรทัดระหว่างคำ
break-all : ลักษณะการทำงานนี้เหมือนกับปกติสำหรับภาษาเอเชีย อนุญาตให้แบ่งคำในบรรทัดข้อความที่ไม่ใช่ภาษาเอเชียได้เช่นกัน ค่านี้เหมาะสำหรับข้อความภาษาเอเชียที่มีข้อความที่ไม่ใช่ภาษาเอเชีย
keep-all : เหมือนกับปกติสำหรับภาษาที่ไม่ใช่เอเชียทั้งหมด สำหรับภาษาจีน เกาหลี และญี่ปุ่น ไม่อนุญาตให้ใช้การแบ่งคำ เหมาะสำหรับคำอธิบายข้อความที่ไม่ใช่ภาษาเอเชีย

ซึ่งมีข้อความภาษาเอเชียจำนวนเล็กน้อย:
ตั้งค่าหรือดึงข้อมูลพฤติกรรมการตัดคำสำหรับข้อความภายในออบเจ็กต์ โดยเฉพาะเมื่อมีหลายภาษาปรากฏขึ้น
สำหรับภาษาจีน ควรใช้คำว่า break-all
คุณสมบัตินี้เป็นแบบอ่านอย่างเดียวสำหรับวัตถุ currentStyle วัตถุอื่นสามารถอ่านและเขียนได้
คุณลักษณะสคริปต์ที่เกี่ยวข้องคือ wordBreak
ตัวอย่าง:
div {ตัวแบ่งคำ: แบ่งทั้งหมด;
นำไปใช้กับ:
IE5.0+

เวอร์ชันตัดคำ: การสืบทอดคุณสมบัติที่เป็นกรรมสิทธิ์ของ IE5.5+: ใช่ ไวยากรณ์:
การตัดคำ : ปกติ |
ค่า:
ปกติ: ค่าเริ่มต้น อนุญาตให้เนื้อหาขยายเกินขอบเขตคอนเทนเนอร์ที่ระบุ
break-word : เนื้อหาจะแตกภายในขอบเขต หากจำเป็น จะมีการแบ่งคำด้วย

:
ตั้งค่าหรือดึงข้อมูลว่าจะแบ่งบรรทัดเมื่อบรรทัดปัจจุบันเกินขอบเขตของคอนเทนเนอร์ที่ระบุหรือไม่
คุณสมบัตินี้ใช้ได้กับวัตถุเค้าโครงเท่านั้น เช่น วัตถุบล็อก หากต้องการใช้แอตทริบิวต์นี้สำหรับองค์ประกอบแบบอินไลน์ คุณต้องตั้งค่าแอตทริบิวต์ความสูงหรือความกว้างของวัตถุก่อน หรือตั้งค่าแอตทริบิวต์ตำแหน่งให้เป็นสัมบูรณ์ หรือตั้งค่าแอตทริบิวต์การแสดงผลเป็นบล็อก
คุณสมบัตินี้เป็นแบบอ่านอย่างเดียวสำหรับวัตถุ currentStyle วัตถุอื่นสามารถอ่านและเขียนได้
คุณลักษณะสคริปต์ที่เกี่ยวข้องคือ wordWrap
ตัวอย่าง:
div { การตัดคำ: แบ่งคำ;

ให้ความสนใจกับสิ่งนี้
break-word : เนื้อหาจะแตกภายในขอบเขต หากจำเป็น การแบ่งบรรทัดภายในคำ (word-break) จะเกิดขึ้นด้วย

ดังนั้นการตัดคำก็เพียงพอแล้ว ตามค่าเริ่มต้น การแบ่งคำจะไม่ถูกแยกออก แต่หากมีคำที่ยาวมาก เช่น ผิดเวอร์ชัน คำที่ยาวที่สุดในประวัติศาสตร์ครั้งที่แล้ว 12 คำภาษาอังกฤษที่น่ากลัว ยังสามารถแยกบรรทัดได้ ทำให้โต๊ะไม่เสียหาย
อย่างไรก็ตาม สิ่งนี้ไม่ได้ถูกนำมาใช้เป็นมาตรฐาน css2 โดย w3c ดังนั้น Mozilla จึงไม่รองรับคุณลักษณะนี้ หากใครก็ตามเขียนคำภาษาอังกฤษได้ดี ก็ไม่เป็นไร คำที่ยาวมาก Mozilla Firefox จะ มันจะไม่ทำลายบรรทัดและมันจะพัง
ฉันไม่รู้ว่า CSS3 จะยอมรับคุณลักษณะนี้หรือไม่ แต่พูดตามตรง คำที่ BT เกินไปจะดีกว่า...