مدیریت فاصله سفید در CSS – ویژگی white-space

ویژگی white-space در CSS نحوه مدیریت فاصله سفید (یا Whitespace) داخل المان را مشخص می‌کند. مرورگر براساس مقدار این ویژگی، چگونگی رفتار با انواع کاراکترهای فاصله و تب و خطوط جدید را تشخیص می‌دهد.

نحوه مدیریت فاصله ها و استفاده از ویژگی white-space در CSS

برای مدیریت فاصله سفید یا فضای خالی موجود در متن داخل المان کافیست مشابه با نمونه زیر مقدار مناسبی برای ویژگی white-space مشخص کنید:

p.a {
  white-space: nowrap;
}

مقدار nowrap برای این ویژگی در قانون CSS فوق باعث می‌شود در تمام پاراگراف های دارای کلاس a چند فاصله کنار هم به یک فاصله منقبض شوند. به علاوه متن در انتهای خط به خط بعدی منتقل نمی‌شود (این برخلاف حالت عادی است که در صورت کمبود فضای کافی در انتهای خط، متن به خط بعدی می‌رود).

پاراگراف (المان <p>) زیر که دارای کلاس a است را درنظر بگیرید:

<p class="a">
This is my text. This   is my text. This is my text.

This is my text. This   is my text. This is my text.
This is my text. This   is my text. This is my text.
</p>

تصویر زیر نمایی از اعمال قانون قبل روی این پاراگراف را نمایش می‌دهد. همانطور که مشاهده می‌کنید با وجود فاصله های اضافی و شکست متن به خط های مختلف در محتوای داخل المان، تمام فاصله های افقی اضافی به یک فاصله تبدیل می‌شوند و متن به صورت پیوسته در یک خط درج می‌شود:

مقادیر متداول برای ویژگی white-space

شما می‌توانید از مقادیر متداول زیر برای ویژگی white-space به منظور تعیین نحوه مدیریت فاصله های سفید در CSS استفاده کنید:

• normal: این مقدار، به عنوان مقدار پیشفرض برای ویژگی white-space باعث می‌شود چند فاصله کنار هم به یک فاصله منقبض شود و رفتن به خط جدید در متن کد نادیده گرفته شود. همچنین ادامه متن هنگام نیاز (در صورت نبود فضای کافی برای باقیمانده متن) به خط بعدی منتقل می‌شود و با رسیدن به المان یا تگ <br> نیز متن شکسته می‌شود.
• nowrap: این مقدار باعث می‌شود چند فاصله کنار هم به یک فاصله منقبض شود و رفتن به خط جدید در متن کد نادیده گرفته شود. در عین حال مابقی متن نیز هنگام رسیدن به انتهای یک خط به خط بعدی منتقل نمی‌شود. به عبارت بهتر در این حالت متن در یک خط نوشته می‌شود. البته با رسیدن به المان یا تگ <br>، متن شکسته می‌شود.
• pre: با وجود این مقدار برای ویژگی white-space، فاصله های سفید حفظ می‌شوند. در واقع مقدار pre، باعث می‌شود فاصله های اضافی منقبض نشوند. به علاوه متن مطابق با شکست های خطوط در محتوای المان و المان های <br> به خط بعدی منتقل می‌شود. المان <pre> در HTML به صورت پیشفرض دارای رفتاری مشابه در قبال Whitespace هاست.
• pre-line: این مقدار باعث می‌شود چند فاصله کنار هم به یک فاصله منقبض شود. به علاوه متن مطابق با شکست های خطوط در محتوای المان و المان های <br> و همچنین هنگام نیاز به خط بعدی منتقل می‌شود.
• pre-wrap: این مقدار باعث می‌شود فاصله های سفید حفظ شوند. به علاوه متن مطابق با شکست های خطوط در محتوای المان و المان های <br> و همچنین هنگام نیاز به خط بعدی منتقل می‌شود.

مثالی کامل از نتیجه مقادیر مجاز برای ویژگی white-space

فرض کنید پاراگرافی به صورت زیر در صفحه درج شده است (به المان <br> پس از خط سوم متن توجه کنید):

<p class="a">
This is my text. This   is my text. This is my text.

This is my text. This   is my text. This is my text.
This is my text. This   is my text. This is my text.<br>
This is my text. This   is my text. This is my text.
</p>

در تصویر زیر می‌توانید نتیجه مقادیر مختلف برای ویژگی white-space را روی این پاراگراف مشاهده کنید:

بازگشت به فهرست مجموعه آموزشی CSS