เผยแพร่เมื่อวันที่ 11 ตุลาคม 2024
ใน Chrome 130
box-decoration-break
พร็อพเพอร์ตี้ CSS ที่มีค่าเป็น clone
พร้อมใช้งาน
พร้อมด้วยการรองรับการแบ่งส่วนเนื้อหาแบบอินไลน์และการบล็อก โพสต์นี้จะอธิบายเหตุผลและวิธีใช้
การกระจาย Fragment แบบอินไลน์
การกระจาย Fragment แบบอินไลน์คือสิ่งที่จะเกิดขึ้นเมื่อเอลิเมนต์แบบอินไลน์ ตัวอย่างเช่น
สตริงข้อความที่จะขึ้นบรรทัดใหม่หลายบรรทัด องค์ประกอบในบรรทัดมีกล่อง ซึ่งปกติแล้วคุณไม่จําเป็นต้องสนใจ เว้นแต่ว่าคุณจะพยายามเพิ่มพื้นหลังหรือเส้นขอบให้กับองค์ประกอบ ในตัวอย่างต่อไปนี้ มีการเพิ่มพื้นหลังที่มี border-radius ลงใน span ขอบโค้งเฉพาะที่
จุดเริ่มต้นและจุดสิ้นสุดของสตริง
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
}
ค่าเริ่มต้นของ box-decoration-break คือ slice ซึ่งจะให้เอฟเฟกต์การแบ่งกล่อง อย่างไรก็ตาม box-decoration-break: clone ที่รองรับใหม่หมายความว่าแต่ละบรรทัดจะเริ่มต้นและสิ้นสุดด้วยเส้นขอบมน
span {
background-color: #002856;
color: #fff;
border-radius: 0.5em;
border: 2px solid black;
box-decoration-break: clone;
}
บล็อกการกระจาย Fragment
บล็อกการกระจาย Fragment หากคุณแบ่งเนื้อหาออกเป็นคอลัมน์ด้วย เลย์เอาต์หลายคอลัมน์ หรือเมื่อคุณพิมพ์เนื้อหาแยกเป็นหน้าๆ
ในตัวอย่างต่อไปนี้ เนื้อหาจะแบ่งออกเป็นคอลัมน์ และแต่ละย่อหน้า
มีเส้นขอบ เมื่อค่าเริ่มต้นคือ slice ระบบจะตัดกล่องที่ด้านล่างและด้านบนของคอลัมน์
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
}
เมื่อใช้ box-decoration-break: clone เมื่อช่องมีการแบ่งเป็นส่วนๆ แต่ละส่วนจะมีการ
ล้อมรอบด้วยเส้นขอบ
.columns {
column-count: 5;
}
.columns p {
border: 5px solid #34c9eb;
padding: 0.5em;
box-decoration-break: clone;
}
ปัญหาเดียวกันนี้จะเกิดขึ้นหากคุณมีเส้นขอบในช่องที่กระจัดกระจายเมื่อพิมพ์หน้าเว็บ หากช่องแบ่งออกเป็น 2 หน้า เส้นขอบบนช่องนั้น จะเสร็จสมบูรณ์ในหน้าแรก แล้วเปิดช่องใหม่ในหน้าที่สอง