CSS text-wrap: สวย

เลือกใช้การตัดข้อความที่เพิ่มประสิทธิภาพเพื่อความงามที่รวดเร็วกว่า

Adam Argyle

ใน Chrome 117 คุณจะใช้ฟีเจอร์การตัดข้อความแบบใหม่ได้text-wrap: pretty จาก CSS Text ระดับ 4

p {
  text-wrap: pretty;
}

https://codepen.io/web-dot-dev/pen/yLGmzLJ

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

รูปภาพมาจาก Google Fonts - แม่ม่ายและเด็กกำพร้า

ตั้งแต่ Chrome 117 เป็นต้นไป คุณสามารถหลีกเลี่ยงเด็กกำพร้าได้โดยใช้ CSS เพียงบรรทัดเดียว: text-wrap: pretty

หมายเหตุ: text-wrap: pretty แตกต่างจากพร็อพเพอร์ตี้ orphans ของ CSS ซึ่งมีความเกี่ยวข้องเมื่อใช้การออกแบบหลายคอลัมน์ของ CSS นอกจากนี้ pretty ยังจัดการเฉพาะเด็กกำพร้าเท่านั้น ไม่ใช่แม่ม่าย

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

รูปภาพมาจากเหตุใดคุณจึงควรนำเด็กกำพร้าออกจากข้อความเนื้อหา

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

หากสนใจรายละเอียดของอัลกอริทึมที่ใช้กำหนดจำนวนเส้นที่เหมาะสมที่สุดหรือข้อควรพิจารณาด้านประสิทธิภาพ นี่คือลิงก์ไปยังเอกสารการออกแบบที่สร้างโดยวิศวกรที่อยู่เบื้องหลังฟีเจอร์นี้ Koji Ishii

หากคุณมีคำแนะนำหรือการปรับปรุงเกี่ยวกับการแบ่งบรรทัดอื่นๆ เราอยากจะฟัง! รายงานปัญหาในเครื่องมือติดตามข้อบกพร่องของ Chromium โดยระบุรายละเอียด ตัวอย่างการขึ้นบรรทัดใหม่ที่ดีและไม่ดี แล้วเราจะติดต่อกลับหาคุณ