مقدمه

ویژگی white-space در CSS نحوه نمایش فاصله‌ها (Spaces)، تب‌ها (Tabs) و شکستن خطوط (Line Breaks) را در متن کنترل می‌کند.

به طور پیش‌فرض مرورگر فاصله‌های اضافی را حذف کرده و متن را در صورت نیاز به خط بعد منتقل می‌کند. با استفاده از white-space می‌توانید این رفتار را تغییر دهید.

مقادیر مختلف white-space

1. normal (مقدار پیش‌فرض)

در این حالت:

• چند فاصله پشت سر هم به یک فاصله تبدیل می‌شوند.
• متن در صورت کمبود فضا به خط بعد می‌رود.

p {
  white-space: normal;
}

مثال:

سلام      دنیا

خروجی:

سلام دنیا

2. nowrap

در این حالت:

• فاصله‌های اضافی حذف می‌شوند.
• متن به هیچ عنوان به خط بعد منتقل نمی‌شود.

p {
  white-space: nowrap;
}

کاربرد

برای جلوگیری از شکستن متن در دکمه‌ها، منوها و تیترهای کوتاه.

مثال:

button {
  white-space: nowrap;
}

3. pre

رفتاری مشابه تگ HTML زیر دارد:

<pre></pre>

در این حالت:

• تمام فاصله‌ها حفظ می‌شوند.
• تمام Enterها حفظ می‌شوند.
• متن فقط در محل Enterهای موجود در محتوا شکسته می‌شود.

p {
  white-space: pre;
}

مثال:

سلام     دنیا

خوش آمدید

خروجی دقیقاً به همین شکل نمایش داده می‌شود.

4. pre-line

در این حالت:

• فاصله‌های اضافی حذف می‌شوند.
• Enterهای موجود در متن حفظ می‌شوند.
• متن در صورت نیاز به خط بعد منتقل می‌شود.

p {
  white-space: pre-line;
}

مثال:

ورودی:

سلام      دنیا

خوش آمدید

خروجی:

سلام دنیا

خوش آمدید

5. pre-wrap

ترکیبی از pre و normal است.

در این حالت:

• فاصله‌های اضافی حفظ می‌شوند.
• Enterهای موجود حفظ می‌شوند.
• متن در صورت نیاز به خط بعد منتقل می‌شود.

p {
  white-space: pre-wrap;
}

مثال:

سلام      دنیا

خوش آمدید

تمام فاصله‌ها و خطوط جدید حفظ خواهند شد.

مقایسه سریع مقادیر

کاربردهای رایج

جلوگیری از شکستن متن

.title {
  white-space: nowrap;
}

نمایش کدها و متون قالب‌بندی‌شده

.code {
  white-space: pre;
}

نمایش پیام‌های کاربر با حفظ Enterها

.message {
  white-space: pre-wrap;
}

نمایش متن چندخطی بدون حفظ فاصله‌های اضافی

.description {
  white-space: pre-line;
}

نکته مهم

اگر متن طولانی دارید و از nowrap استفاده می‌کنید، ممکن است متن از کادر خارج شود. در این حالت معمولاً از ویژگی‌های زیر نیز استفاده می‌شود:

overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

مثال:

.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

خروجی:

این یک متن بسیار طولانی است...

جمع‌بندی

ویژگی white-space نحوه مدیریت فاصله‌ها و شکست خطوط در متن را کنترل می‌کند.

• normal → رفتار پیش‌فرض مرورگر
• nowrap → جلوگیری از رفتن متن به خط بعد
• pre → حفظ کامل فاصله‌ها و خطوط
• pre-line → حفظ خطوط جدید و حذف فاصله‌های اضافی
• pre-wrap → حفظ فاصله‌ها و خطوط همراه با شکستن خودکار متن

از همراهی شما با پارمین کلود سپاسگزاریم.