ในภาษาเขียนหลายภาษา คุณสามารถแบ่งบรรทัดระหว่างพยางค์และระหว่างคำได้ ซึ่งมักทำเพื่อให้วางอักขระได้มากขึ้นบรรทัดของข้อความ โดยมีเป้าหมายเพื่อให้มีบรรทัดในกล่องข้อความน้อยลง จึงช่วยประหยัดพื้นที่ได้ ในภาษาดังกล่าว ระบบจะแสดงการแบ่งด้วยขีดกลาง ('-')
โมดูลข้อความ CSS ระดับ 3 จะกำหนดพร็อพเพอร์ตี้ขีดกลางเพื่อควบคุมว่าเมื่อใดที่ระบบจะแสดงขีดกลางต่อผู้ใช้และลักษณะการทำงานของขีดกลางเมื่อแสดง ตั้งแต่เวอร์ชัน 55 เป็นต้นไป Chrome จะใช้พร็อพเพอร์ตี้ขีดกลาง
ตามข้อกําหนด พร็อพเพอร์ตี้ขีดกลางมี 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" อีกครั้ง คุณสามารถยืนยันได้โดยการปรับขนาดหน้าต่าง
การใช้โหมดอัตโนมัติ
ในตัวอย่างที่ 3 ระบบตั้งค่าพร็อพเพอร์ตี้ขีดกลางเป็น auto ในกรณีนี้ คุณไม่จำเป็นต้องใช้ขีดกลางแบบอ่อน เนื่องจาก User Agent จะกำหนดตำแหน่งขีดกลางโดยอัตโนมัติ หากปรับขนาดหน้าต่าง คุณจะเห็นเบราว์เซอร์แบ่งตัวอย่างนี้ตรงตำแหน่งเดียวกับในตัวอย่างที่ 2 แม้ว่าจะไม่มีขีดกลางแบบอ่อนก็ตาม หากย่อหน้าต่างต่อไป คุณจะเห็นว่าเบราว์เซอร์สามารถแบ่งบรรทัดระหว่างพยางค์ 2 พยางค์ในข้อความ