תאריך הפרסום: 11 באוקטובר 2024
ב-Chrome 130
box-decoration-break
נכס CSS עם הערך clone
זמין,
עם תמיכה במקטעים מוטבעים ובלוקים. בפוסט הזה מוסבר למה ואיך
כדי להשתמש בו.
פרגמנטציה בתוך שורה
פירוּר בתוך שורה מתרחש כשרכיב בתוך שורה, למשל מחרוזת טקסט, מפוצל לכמה שורות. לרכיבים בתוך שורה יש תיבה, שבדרך כלל לא צריך להתייחס אליה, אלא אם מנסים להוסיף לרכיב רקע או גבול. בדוגמה הבאה, רקע עם 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;
}
פרגמנטציה של בלוקים
חסימת המקטעים מתרחשת אם מפצלים תוכן לעמודות עם בפריסה של כמה עמודות, או כשמדפיסים את התוכן והתוכן עובר לדפים.
בדוגמה הבאה, התוכן מחולק לעמודות וכל פסקאות יש לו גבול. עם הערך הראשוני של 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;
}
אותו הדבר קורה אם יש גבולות בתיבות שמפוצלות כשמדפיסים את הדף. אם תיבה מחולקת לשני דפים, הגבול על התיבה יושלם בדף הראשון ולאחר מכן יפתח תיבה חדשה בדף השני.