ویژگی break-before در CSS

مقدمه‌ای بر ویژگی break-before در CSS

ویژگی break-before در CSS به ما این امکان را می‌دهد تا کنترل بیشتری بر روی نحوه‌ی شکستن صفحات و خطوط در اسناد داشته باشیم. این ویژگی بیشتر در چاپ و نمایش متن‌های طولانی کاربرد دارد، به خصوص زمانی که می‌خواهیم تعیین کنیم که یک عنصر خاص در شروع یک صفحه یا ستون جدید چگونه نمایش داده شود. به عبارت دیگر می‌توانیم مشخص کنیم که آیا یک عنصر باید قبل از آنکه در صفحه یا ستون جاری قرار بگیرد شکسته شود یا خیر.

به طور معمول، زمانی که شما از break-before استفاده می‌کنید، این ویژگی می‌تواند ارزش‌هایی مانند always، avoid، left یا right را بپذیرد. با انتخاب این مقادیر، شما می‌توانید رفتار شکستن را مطابق نیاز خود تنظیم کنید. به عنوان مثال، اگر بخواهید یک عنوان را همیشه در بالای صفحه جدید نمایش دهید، می‌توانید از مقدار always استفاده کنید.

این ویژگی بیشتر در مواقعی که می‌خواهید متن خود را برای چاپ یا ابزارهای خاص بهینه کنید، نقش موثری دارد. به عنوان مثال، در ایجاد کتاب الکترونیکی یا اسناد PDF، استفاده از این ویژگی می‌تواند کمک کند تا متن شما به درستی شکسته شده و خوانایی بیشتری برای کاربر داشته باشد. همچنین، با توجه به این که وب و محتوای آنلاین همچنان در حال گسترش است، یادگیری این ویژگی می‌تواند به شما در بهبود تجربه کاربر کمک کند.

در پیاده‌سازی break-before باید به سازگاری مرورگرها و نحوه‌ی استفاده آن در انواع مختلف رسانه‌ها توجه داشته باشید. این ویژگی به خصوص در CSS3 به سرعت گسترش یافته و به عنوان یک ابزار مفید برای طراحان و توسعه‌دهندگان مطرح شده است.

مثال عملی از ویژگی break-before

<style>
  .section { 
    break-before: always;
  }
</style>
<div class="section">
  <h2>عنوان بخش جدید</h2>
  <p>متن این بخش در ابتدا با شکستن قبل از آن نمایش داده می‌شود.</p>
</div>

توضیحات کد

خط 1: از تگ <style> برای نوشتن CSS استفاده می‌کنیم.

خط 2: کلاس section را تعریف می‌کنیم تا کنترل بر روی ویژگی break-before را برای عناصر این کلاس داشته باشیم.

خط 3: مقدار always به break-before اضافه می‌شود، که بدین معناست که این بخش همیشه باید در یک صفحه جدید نمایش داده شود.

خط 4: پایان تگ <style>.

خط 5: یک <div> با کلاس section ایجاد می‌کنیم.

خط 6: یک <h2> برای عنوان بخش اضافه می‌کنیم.

خط 7: یک تگ <p> برای نگارش متن این بخش قرار می‌دهیم.

خط 8: پایان تگ <div>.