تاریخ انتشار: 11 اکتبر 2024
در کروم 130، ویژگی box-decoration-break CSS با مقدار clone با پشتیبانی از تکه تکه شدن درون خطی و بلوک در دسترس است. این پست توضیح می دهد که چرا و چگونه از آن استفاده کنید.
تکه تکه شدن درون خطی
تکه تکه شدن درون خطی زمانی اتفاق می افتد که یک عنصر درون خطی، به عنوان مثال رشته ای از متن، در چندین خط شکسته شود. عناصر درون خطی دارای یک جعبه هستند که معمولاً نیازی به فکر کردن در مورد آن ندارید، مگر اینکه بخواهید یک پس زمینه یا حاشیه به عنصر اضافه کنید. در مثال زیر یک پس‌زمینه با border-radius به یک دهانه اضافه می‌شود. حاشیه فقط در ابتدا و انتهای رشته منحنی می شود.
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;
}
همین اتفاق می افتد اگر حاشیه هایی روی جعبه هایی داشته باشید که هنگام چاپ صفحه تکه تکه می شوند. اگر یک کادر به دو صفحه تقسیم شود، حاشیه روی کادر در صفحه اول تکمیل می شود و سپس یک کادر جدید در صفحه دوم باز می شود.