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

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

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

ป้องกันไม่ให้ฟอร์มแตก

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

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

โต๊ะ {

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

div {ตัวแบ่งคำ: แบ่งทั้งหมด; การตัดคำ: แบ่งคำ;}

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

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

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

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

ตามคู่มือภาษาจีน CSS2 โดย Rainer Su

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

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

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

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

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

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