ปรับปรุงเลย์เอาต์ข้อความและความอ่านง่าย

เลย์เอาต์ของข้อความ โดยเฉพาะที่ส่วนท้ายของบรรทัดและส่วนท้ายของย่อหน้า อาจส่งผลต่อความอ่านง่ายและความสวยงามของหน้าเว็บ CSS มีตัวเลือกการตัดข้อความหลายตัวเลือกที่ช่วยปรับปรุงกรณีการใช้งานที่เฉพาะเจาะจงได้

สำหรับบล็อกข้อความสั้นๆ เช่น ส่วนหัว ให้ใช้ text-wrap: balance พร็อพเพอร์ตี้นี้จะสั่งให้เบราว์เซอร์กระจายข้อความให้เท่ากันมากที่สุดในแต่ละบรรทัด เพื่อให้มีลักษณะที่สมมาตรมากขึ้น

พร็อพเพอร์ตี้ CSS text-wrap: pretty ช่วยให้คุณปรับปรุงคุณภาพการพิมพ์ของข้อความเนื้อหาได้โดยเปิดใช้อัลกอริทึมการตัดข้อความที่ซับซ้อนมากขึ้น โดยออกแบบมาเพื่อป้องกันไม่ให้เกิด "คำโดด" (คำเดียวในบรรทัดสุดท้ายของย่อหน้า) และสร้าง "การจัดแนว" ที่ดูน่าอ่านยิ่งขึ้นสำหรับบล็อกข้อความยาวๆ

การใช้งาน

1. ระบุองค์ประกอบของข้อความ

สำหรับ text-wrap: balance ให้เลือกบล็อกข้อความสั้นๆ เช่น หัวเรื่องและส่วนหัวของตาราง หลีกเลี่ยงองค์ประกอบที่มีกล่องที่มองเห็นได้ เช่น เส้นขอบหรือพื้นหลัง เนื่องจากอาจทำให้เกิดพื้นที่ว่างที่มองไม่เห็นโดยไม่คาดคิดในเลย์เอาต์

สำหรับ text-wrap: pretty ให้เลือกองค์ประกอบที่อาจมีข้อความยาวๆ ซึ่งคำที่โดดเดี่ยว (คำที่ขึ้นบรรทัดใหม่เพียงคำเดียว) หรือการขึ้นบรรทัดใหม่ที่ไม่เหมาะสมจะสังเกตเห็นได้ชัดเจนที่สุด ซึ่งรวมถึงองค์ประกอบต่อไปนี้

• <p>
• <blockquote>
• <li>
• องค์ประกอบอื่นๆ ที่อาจมีข้อความยาวๆ

การเลือกวิธีการรวมที่เหมาะสม

2. ใช้การตัดข้อความที่เลือก:

ใช้ text-wrap: balance กับองค์ประกอบสั้นๆ ที่มีหลายบรรทัดโดยเฉพาะ เช่น ส่วนหัว (h1-h6) ส่วนหัวย่อย หรือข้อความที่ดึงมาเน้น

/* Target specific heading elements for balanced wrapping */
h1, h2, h3, h4, h5, h6 {
  /* Enables balanced line-breaking logic */
  text-wrap: balance;
}

ใช้ text-wrap: pretty เพื่อเปิดใช้อัลกอริทึมที่เพิ่มประสิทธิภาพซึ่งจะประเมินบรรทัดสุดท้าย 2-3 บรรทัดของย่อหน้าเพื่อค้นหาจุดขึ้นบรรทัดใหม่ที่ดีที่สุด

/* Apply to multi-line text blocks to prevent orphaned words */
p, blockquote, li, .pretty-text {
  /* Enables pretty line-breaking logic for body copy */
  text-wrap: pretty;
}

ข้อจำกัดและประสิทธิภาพที่สำคัญ

text-wrap: balance

• ขีดจำกัดบรรทัด: เบราว์เซอร์จะจำกัดจำนวนบรรทัดที่พยายามปรับสมดุลเพื่อรักษาประสิทธิภาพ (โดยปกติคือ 6 บรรทัดใน Chromium และ 10 บรรทัดใน Firefox) หากข้อความเกินขีดจำกัดนี้ เบราว์เซอร์จะเปลี่ยนกลับไปใช้ลักษณะการทำงานของ wrap มาตรฐาน หลีกเลี่ยงการใช้ text-wrap: balance ในบล็อกข้อความที่มีแนวโน้มว่าจะเกินขีดจำกัดเหล่านี้
• การใช้งานที่กำหนดเป้าหมาย: อย่าใช้ text-wrap: balance ทั่วโลก (เช่น * { text-wrap: balance; }) อัลกอริทึม "การค้นหาแบบไบนารี" ซ้ำๆ ที่เบราว์เซอร์ใช้มีค่าใช้จ่ายในการประมวลผลสูง จำกัดการใช้เฉพาะองค์ประกอบข้อความสั้นๆ ที่เฉพาะเจาะจง
• การโต้ตอบกับความกว้าง: text-wrap: balance ไม่เปลี่ยนความกว้างของคอนเทนเนอร์ (inline-size) แต่จะส่งผลต่อวิธีตัดข้อความภายในความกว้างนั้นเท่านั้น ซึ่งอาจทำให้มีพื้นที่ว่างที่ส่วนท้ายของคอนเทนเนอร์ และอาจส่งผลต่อเลย์เอาต์ที่ใช้บล็อกข้อความแบบเต็มความกว้าง

text-wrap: pretty

• ประสิทธิภาพเทียบกับคุณภาพ: บังคับ: text-wrap: pretty ใช้ทรัพยากรในการประมวลผลมากกว่าอัลกอริทึม wrap (Greedy) เริ่มต้น เนื่องจากจะประเมินหลายบรรทัด (โดยทั่วไปคือ 4 บรรทัดสุดท้าย) เพื่อเพิ่มประสิทธิภาพจุดขึ้นบรรทัดใหม่ หลีกเลี่ยงการใช้แอตทริบิวต์นี้กับทุกองค์ประกอบทั่วทั้งหน้าหากหน้าเว็บมีเนื้อหาข้อความจำนวนมาก
• เหมาะที่สุดสำหรับข้อความหลายบรรทัด: ประโยชน์ของ pretty จะเห็นได้ชัดที่สุดในย่อหน้าที่มีตั้งแต่ 3 บรรทัดขึ้นไป โดยจะมีผลเพียงเล็กน้อยหรือไม่มีเลยกับข้อความสั้นๆ บรรทัดเดียว
• ลักษณะการทำงานเฉพาะเบราว์เซอร์: โปรดทราบว่ารายละเอียดการติดตั้งใช้งานจะแตกต่างกันไป เบราว์เซอร์ที่ใช้ Chromium มักจะเน้นที่ 4 บรรทัดสุดท้าย ส่วนเครื่องมืออื่นๆ อาจประเมินทั้งย่อหน้า

กลยุทธ์สำรอง

ในเบราว์เซอร์ที่ไม่รองรับ text-wrap: balance หรือ text-wrap: pretty ระบบจะไม่สนใจพร็อพเพอร์ตี้ และข้อความจะตัดขึ้นบรรทัดใหม่โดยใช้ลักษณะการทำงาน wrap เริ่มต้น ซึ่งเป็นการเพิ่มประสิทธิภาพแบบก้าวหน้าที่ลดลงอย่างค่อยเป็นค่อยไปจนถึงการจัดพิมพ์มาตรฐาน ซึ่งจะช่วยให้เนื้อหาของคุณยังคงอ่านได้สมบูรณ์แบบในทุกเบราว์เซอร์ พร้อมทั้งมอบประสบการณ์ที่เหนือกว่าให้กับผู้ที่รองรับฟีเจอร์นี้

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