CSS นำเทคนิคการพิมพ์ด้วยมือแบบดั้งเดิมมาออกแบบตัวแบ่งบรรทัดสำหรับบล็อกข้อความที่สมดุล
ค่า balance
สำหรับ text-wrap
เป็นส่วนหนึ่งของข้อความ CSS ระดับ 4 ดูตัวอย่างในโพสต์นี้เพื่อดูวิธี
CSS บรรทัดเดียวนี้ สามารถปรับปรุงเลย์เอาต์ข้อความได้อย่างมาก
ไม่มี text-wrap: balance
ผู้ออกแบบ บรรณาธิการเนื้อหา และผู้เผยแพร่
เครื่องมือ 2-3 รายการ
เพื่อเปลี่ยนความสมดุลของเส้น ตัวเลือกที่ดีที่สุดที่มีให้เลือกใช้
<wbr>
หรือ
­
เพื่อช่วยเหลือ
ช่วยแนะรูปแบบข้อความเพื่อการตัดสินใจที่ชาญฉลาดมากขึ้นว่าจะแบ่งบรรทัดหรือคำตรงไหน
ในฐานะนักพัฒนาซอฟต์แวร์ คุณไม่ทราบขนาดสุดท้าย ขนาดแบบอักษร หรือแม้แต่ภาษาของ บรรทัดแรกหรือย่อหน้า ตัวแปรทั้งหมดที่จำเป็นต่อประสิทธิภาพและความสวยงาม การจัดการข้อความตัดออกนั้นอยู่ในเบราว์เซอร์ นี่คือสาเหตุที่เราเห็นบรรทัดแรก การตัดตามในรูปภาพต่อไปนี้
![บรรทัดแรกจะไฮไลต์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บ ซึ่งขยายเต็มความกว้างของพื้นที่ในบรรทัด และมีคำที่แขวนอยู่ 2 คำในบรรทัดที่ 2](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-fe0c4a80e307b.png?authuser=19&hl=th)
.unbalanced {
max-inline-size: 50ch;
}
เมื่อใช้ text-wrap: balance
จาก CSS Text 4 คุณสามารถขอให้เบราว์เซอร์
หาวิธีตัดบรรทัดสมดุลที่ดีที่สุดสำหรับข้อความ เบราว์เซอร์
รู้ปัจจัยทั้งหมด เช่น ขนาดแบบอักษร ภาษา และพื้นที่ที่จัดสรร
ผลลัพธ์ของการตัดข้อความแบบสมดุลของเบราว์เซอร์ในวันนี้มีลักษณะดังนี้
![ระบบจะไฮไลต์บรรทัดแรกเหมือนกับเครื่องมือสำหรับนักพัฒนาเว็บรุ่นก่อน โดยแต่ไม่ได้ขยายความกว้างเต็ม โดยขึ้นบรรทัดใหม่ก่อนสิ้นสุด จึงเป็นบล็อกข้อความที่สมดุล](https://developer.chrome.com/static/docs/css-ui/css-text-wrap-balance/image/headline-is-highlighted-0861292a42f0d.png?authuser=19&hl=th)
.balanced {
max-inline-size: 50ch;
text-wrap: balance;
}
การมองเห็นแสดงคู่กัน อยู่นิ่งๆ และไม่มีการแสดงข้อมูลการแก้ไขข้อบกพร่องซ้อนกันจะเป็นประโยชน์อย่างมาก
ดวงตาของคุณควรจะพอใจกับบล็อกข้อความที่สมดุลมากขึ้น โดนใจ ความสนใจได้ดีขึ้นและในภาพรวมนั้นอ่านง่ายขึ้น
การค้นหาความสมดุล
พาดหัวคือสิ่งแรกที่ผู้อ่านจะเห็น ควรดึงดูดสายตาและ อ่านง่าย ซึ่งดึงดูดความสนใจของผู้ใช้ และให้ความรู้สึกที่มีคุณภาพและ การรับรองของเรา อักษรที่ดีช่วยสร้างความมั่นใจให้กับผู้อ่าน และกระตุ้นให้ผู้อ่าน อ่านต่อ
แต่เดิมทีนักออกแบบนี้ทำงานด้วยมือหรือมองในแง่ดี การสร้างความสมดุลให้กับข้อความ ทำให้ผู้ชมไม่ต้องดูคณิตศาสตร์ หัวข้อนี้มัก เรียกว่า "การปรับแนวเมตริก" หรือ "การปรับแสงสี" สำหรับสื่อเผยแพร่ขนาดใหญ่ เช่น New York Times ความสมดุลของบรรทัดแรกเป็นรายละเอียดด้านประสบการณ์ของผู้ใช้ที่สำคัญมาก
การปรับสมดุลข้อความในภาพตัวอักษรย้อนไปในยุคแรกๆ ของการพิมพ์ เมื่อเครื่องพิมพ์ จะวางจดหมาย เมื่อเครื่องมือและเทคนิคพัฒนาไป ผลลัพธ์ก็ดีขึ้นตามไปด้วย ทุกวันนี้ นักออกแบบมีสี น้ำหนัก ขนาด และอื่นๆ เพื่อทำให้ข้อความสมดุล ดีไซน์ของตัวเอง
แต่สำหรับบนเว็บ จะมีการควบคุมน้อยกว่าเนื่องจากเอกสารมีการเปลี่ยนแปลง
ขนาดและสีตามผู้ใช้ text-wrap: balance
นำศาสตร์ของ
สร้างความสมดุลให้กับข้อความในเว็บด้วยวิธีอัตโนมัติ ต่อยอดจากงานและ
ธรรมเนียมของนักออกแบบ
ในอุตสาหกรรมการพิมพ์
บรรทัดแรกยอดคงเหลือ
นี่จะเป็นและควรเป็นกรณีการใช้งานหลักสำหรับ text-wrap: balance
เสมอ
ดวงตาต้องมีขนาดและมีลักษณะสมมาตรและสายตาอ่านได้ง่าย ตั้งค่า
ให้บรรทัดแรกทั้งหมดตัดกับข้อความที่สมดุลด้วย CSS ต่อไปนี้
h1,h2,h3,h4,h5,h6 {
text-wrap: balance;
}
การนำสไตล์นี้มาใช้เพียงอย่างเดียวอาจไม่ได้ให้
ผลลัพธ์ที่คุณคาดหวัง เนื่องจาก
ข้อความจะต้องตัดออก จึงมีความยาวบรรทัดสูงสุดจาก
ที่ไหนสักแห่ง คุณจะเห็น
max-inline-size
ตามตัวอย่างในโพสต์นี้ รูปแบบนี้เหมือนกับ max-width
แต่สามารถตั้งค่า
หนึ่งครั้งสำหรับภาษาใดก็ได้
ข้อจำกัด
งานสร้างความสมดุลให้กับข้อความมีค่าใช้จ่าย เบราว์เซอร์จำเป็นต้องวนซ้ำ ทำซ้ำๆ เพื่อหาวิธี Wrapper ที่สมดุลที่สุด ประสิทธิภาพนี้ ค่าใช้จ่ายจะลดลงตามกฎ โดยใช้ได้สำหรับบรรทัดไม่เกิน 6 บรรทัดเท่านั้น
ข้อพิจารณาด้านประสิทธิภาพ
อย่างไรก็ตาม คุณไม่ควรใช้การปรับสมดุลการตัดข้อความกับงานออกแบบทั้งหมด เป็น คำขอที่เสียเปล่า เนื่องจากขีดจำกัด 6 บรรทัด และอาจส่งผลต่อความเร็วในการแสดงผลหน้าเว็บ
* { text-wrap: balance; }
h1, h2, h3, h4, h5, h6, blockquote { text-wrap: balance; }
ข้อดีที่สำคัญของฟีเจอร์นี้คือคุณไม่จำเป็นต้องรอและตัดข้อความ การสร้างสมดุลให้กับการโหลดแบบอักษร ดังเช่นที่คุณอาจจะทำด้วย JavaScript ในปัจจุบัน เบราว์เซอร์จัดการเอง!
การโต้ตอบกับพร็อพเพอร์ตี้ white-space
ข้อความสร้างสมดุลจะแข่งขันกับ
white-space
เนื่องจากรายการหนึ่งขอให้ไม่รวม ส่วนอีกรายการขอ
การห่อคลุมแบบสมดุล คุณสามารถแก้ปัญหานี้ได้โดยยกเลิกการตั้งค่าพร็อพเพอร์ตี้ช่องว่าง
ใช้การรวมแบบสมดุลได้อีกครั้ง
.balanced {
white-space: unset;
text-wrap: balance;
}
การจัดสมดุลจะไม่เปลี่ยนขนาดในบรรทัดขององค์ประกอบ
โซลูชัน JavaScript บางอย่างสำหรับข้อความมีความสมดุลมีข้อดีคือ
การรวม เนื่องจากไม่เปลี่ยนแปลง max-width
ขององค์ประกอบที่มี ช่วงเวลานี้
มีโบนัสพิเศษคือการ "ลดขนาด" ไปยังบล็อกที่สมดุล text-wrap:
balance
ไม่มีเอฟเฟกต์ดังกล่าวและสามารถดูได้ในตัวอย่างนี้
ดูว่าความกว้างที่แสดงจากเครื่องมือสำหรับนักพัฒนาเว็บมีพื้นที่ขนาดใหญ่มากในตอนท้ายอย่างไร
เนื่องจากเป็นรูปแบบการห่อเท่านั้น ไม่ได้เป็นรูปแบบการเปลี่ยนขนาด เนื่องจาก
ที่นี่มี 2-3 สถานการณ์ที่ text-wrap: balance
ไม่ค่อยดีนัก
อย่างน้อยในความคิดของผม ตัวอย่างเช่น ส่วนหัวภายในการ์ด (หรือคอนเทนเนอร์ใดก็ได้
ที่มีเส้นขอบหรือเงา)
การตัดข้อความสมดุลเสียดสีสร้างความไม่สมดุลให้กับองค์ประกอบที่มีอยู่
คำอธิบายสั้นๆ เกี่ยวกับเทคนิคที่เบราว์เซอร์ใช้
เบราว์เซอร์จะดำเนินการค้นหาไบนารี เพื่อหาความกว้างที่เล็กที่สุด ไม่ทำให้เกิดบรรทัดใดๆ เพิ่มเติม คือหยุดที่พิกเซล CSS หนึ่งพิกเซล (ไม่แสดง พิกเซล) หากต้องการลดขั้นตอนในการค้นหาไบนารีที่เบราว์เซอร์ขึ้นต้นด้วย 80% ของความกว้างเส้นเฉลี่ย