منتشر شده: ۱۱ اکتبر ۲۰۲۴
در کروم ۱۳۰، ویژگی CSS مربوط به box-decoration-break با مقدار 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;
}
همین اتفاق میافتد اگر حاشیههای کادرها هنگام چاپ صفحه تکهتکه شوند. اگر یک کادر به دو صفحه تقسیم شود، حاشیه کادر در صفحه اول کامل میشود و سپس یک کادر جدید در صفحه دوم باز میشود.