เลือกใช้การตัดข้อความแบบเพิ่มประสิทธิภาพเพื่อความสวยงามเหนือความเร็ว
ตั้งแต่ Chrome 117 คุณจะใช้ฟีเจอร์การตัดข้อความใหม่ได้text-wrap: pretty
จาก CSS Text Level 4
p {
text-wrap: pretty;
}
บรรทัดแรกและบรรทัดสุดท้ายในการจัดหน้าคือคำเดี่ยวๆ ที่โดดเดี่ยวอยู่ที่ท้ายย่อหน้าหรือบล็อกข้อความ แม่หม้ายเป็นคำที่อยู่เดี่ยวๆ ที่ด้านบนสุดของบล็อกข้อความ และมีเด็กกำพร้าอยู่ตามลำพังตรงท้ายบล็อกข้อความ เนื่องจากอาจขัดจังหวะการมองผ่านข้อความของเรา ทำให้อ่านเนื้อหาได้ยากขึ้น นักออกแบบบางรายพยายามหลีกเลี่ยงปัญหานี้โดยพยายามทำทุกวิถีทางเพื่อไม่ให้เกิดปัญหา
ตั้งแต่ Chrome 117 เป็นต้นไป คุณสามารถหลีกเลี่ยงองค์ประกอบที่ไม่มีบุตรหลานได้ด้วย CSS เพียง 1 บรรทัด: text-wrap: pretty
ฟีเจอร์นี้ทำงานมากกว่าแค่ตรวจสอบว่าย่อหน้าไม่จบลงด้วยคำเดียว แต่ยังปรับการแบ่งวรรคด้วยหากมีบรรทัดที่มีเครื่องหมายขีดกลางปรากฏต่อกันที่ท้ายย่อหน้า หรือปรับบรรทัดก่อนหน้าเพื่อให้มีพื้นที่ และจะปรับการจัดข้อความให้อยู่ตรงกลางอย่างเหมาะสมด้วย โดยทั่วไปแล้ว text-wrap: pretty มีไว้สำหรับการตัดบรรทัดและการแบ่งข้อความที่ดีกว่า โดยปัจจุบันจะมุ่งเน้นที่เด็กกำพร้า
ในอนาคต text-wrap: pretty อาจมีการปรับปรุงเพิ่มเติม
นอกจากนี้ยังมี text-wrap: balance ซึ่งไม่ได้ป้องกันบรรทัดเดี่ยว แต่ช่วยให้ข้อความตัดขึ้นบรรทัดใหม่ในลักษณะที่สร้างบล็อกข้อความที่กลมกลืน เราใช้ balance สำหรับบรรทัดแรกและ pretty สำหรับย่อหน้า
หากสนใจรายละเอียดของอัลกอริทึมที่ใช้ในการกำหนดจำนวนบรรทัดที่เหมาะสมหรือข้อควรพิจารณาด้านประสิทธิภาพ นี่คือลิงก์ไปยังเอกสารการออกแบบที่วิศวกร Koji Ishii เป็นผู้จัดทำขึ้นสำหรับฟีเจอร์นี้
หากมีคำแนะนำหรือข้อเสนอแนะอื่นๆ เกี่ยวกับการแบ่งบรรทัด เรายินดีรับฟัง โปรดรายงานปัญหาในเครื่องมือติดตามข้อบกพร่องของ Chromium พร้อมรายละเอียดและตัวอย่างการขึ้นบรรทัดใหม่ที่เหมาะสมและไม่เหมาะสม แล้วเราจะติดต่อกลับหาคุณ