ในภาษาเขียนหลายภาษา สามารถแบ่งบรรทัดระหว่างพยางค์และระหว่างคำได้ การทำเช่นนี้มักจะทำให้สามารถเพิ่มอักขระในบรรทัดข้อความได้มากขึ้น โดยมีเป้าหมายให้ลดจำนวนบรรทัดในพื้นที่ข้อความเพื่อประหยัดพื้นที่ ในภาษาดังกล่าว จะมีเครื่องหมายยัติภังค์กำกับไว้ ("-")
โมดูลข้อความ CSS ระดับ 3 กำหนดพร็อพเพอร์ตี้ขีดกลางเพื่อควบคุมเวลาที่ขีดกลางจะแสดงให้ผู้ใช้เห็นและลักษณะการทำงานเมื่อแสดงขีดกลางสั้นดังกล่าว Chrome จะเริ่มใช้พร็อพเพอร์ตี้ขีดกลางตั้งแต่เวอร์ชัน 55 เป็นต้นไป
ตามข้อกำหนด พร็อพเพอร์ตี้ขีดกลางมีค่า 3 ค่า ได้แก่ none, manual และ auto ในตัวอย่างนี้ เราต้องใช้ขีดกลางสั้น (­) ตามตัวอย่างต่อไปนี้
Google ipsum dolor sit amet, consectetur adipiscing e­lit.
ขีดกลางสั้นคือเครื่องหมายที่จะปรากฏเมื่อขึ้นตรงขอบต่อท้ายเท่านั้น ลักษณะที่ขีดกลางนี้แสดงผลใน Chrome 55 ขึ้นไปจะขึ้นอยู่กับค่าของพร็อพเพอร์ตี้ hypens ของ CSS
-webkit-hyphens: manual;
hyphens: manual;
การรวมสิ่งนี้จะให้ผลลัพธ์เช่นนี้:
โปรดสังเกตว่าจะมองไม่เห็นเครื่องหมายขีดกลางสั้น ในทุกกรณี เมื่อคำที่มีขีดกลางสั้นอยู่ในบรรทัดเดียว ขีดกลางนั้นจะไม่ปรากฏ คราวนี้มาดูกันว่า ค่าทั้ง 3 ของขีดกลางมีลักษณะการทำงานอย่างไร
ไม่ใช้เลย
ในตัวอย่างแรก ตั้งค่าพร็อพเพอร์ตี้ขีดกลางเป็น none ซึ่งจะช่วยป้องกันไม่ให้ระบบแสดงขีดกลางสั้นชั่วคราว คุณยืนยันได้โดยการปรับขนาดหน้าต่าง
เพื่อให้คำว่า "elit" ไม่พอดีกับบรรทัดข้อความที่มองเห็นได้
กำลังใช้คู่มือ
ในตัวอย่างที่ 2 พร็อพเพอร์ตี้ขีดกลางสั้นตั้งค่าเป็น manual ซึ่งหมายความว่าขีดกลางสั้นจะปรากฏขึ้นเมื่อขอบตัดคำว่า "elit" เท่านั้น และขอย้ำอีกครั้งว่าสามารถยืนยัน
โดยการปรับขนาดหน้าต่าง
การใช้ Auto
ในตัวอย่างที่ 3 พร็อพเพอร์ตี้ขีดกลางสั้นตั้งค่าเป็น auto ในกรณีนี้ ไม่จำเป็นต้องมีขีดกลางสั้นเนื่องจาก User Agent จะระบุตำแหน่งเครื่องหมายขีดกลางโดยอัตโนมัติ หากปรับขนาดหน้าต่าง คุณจะเห็นว่าเบราว์เซอร์ใส่เครื่องหมายขีดกลางในตัวอย่างนี้ในตำแหน่งเดียวกับที่ 2 แม้ว่าจะไม่มีเครื่องหมายขีดกลางแบบยืดหยุ่นก็ตาม หากคุณย่อหน้าต่างต่อไป คุณจะเห็นว่าเบราว์เซอร์สามารถแบ่งบรรทัดระหว่าง 2 พยางค์ในข้อความได้