white-space

ویژگی white-space وظیفه اداره کردن فضاهای خالی متن در یک عنصر را به عهده دارد.

white space یا همان فضای خالی می تواند یک تک فاصله ای باشد که توسط کلید space یا tab ایجاد شده است، یا یک سرخط باشد که توسط کلید enter ایجاد شده است.

از این ویژگی برای نحوه برخورد با فضاهای خالی موجود در کد در زمان نمایش خروجی استفاده می شود.

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

با استفاده از این ویژگی می توانیم از موضوع را کنترل کنیم.

 

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

 


white-space: normal | pre | nowrap | pre-wrap | pre-line

 

 

normal

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

مثلا اگر دو تا space بین دو کلمه ایجاد کنیم در زمان خروجی این دو فاصله به یک فاصله تبدیل می شوند.

 

pre

گاهی نیاز داریم تا همانطور که در کد می نویسیم در خروجی نمایش داده شود. یعنی فضاهای خالی و خطوط جدید ایجاد شده دست نخورده باقی بمانند. برای این کار از مقدار pre برای این ویژگی استفاده می کنیم. این مقدار از نام تگ <pre> در HTML که دقیقا همین وظیفه را به عهده دارد گرفته شده است.

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

 


p {
  white-space: pre;  
}

 

 

pre-wrap

حال فرض کنیم می خواهیم تمام حالات pre را داشته باشیم اما همچنین زمانی که متن به لبه نگهدارنده می رسد و دیگر فضای خالی وجود ندارد بصورت خودکار به خط بعد بشکند. برای این قصه از مقدار pre-wrap استفاده می کنیم.

 


p {
  white-space: pre-wrap;  
}

 

 

nowrap

حال اگر بخواهیم همان حالت normal را داشته باشیم یعنی فضاهای خالی از بین بروند و در عین حال متن به هیچ عنوان به خط جدید نشکند می توانیم از مقدار nowrap استفاده کنیم. که این حالت امکان دارد موجب سرریز متن از عنصر نگهدارنده اش شود.

 


p {
  white-space: nowrap;  
}

 

 

pre-line

با استفاده از مقدار pre-line می توانیم فضاهای خالی را از بین ببریم اما سرخط ها را به همان صورت که در کد نوشته شده اند حفظ کنیم. و همینطور زمانی که متن به لبه نگهدارنده اش برسد بشکند.

 


p {
  white-space: pre-line;  
}

 

از این ویژگی جدا از متن برای عناصر خطی دیگر هم می شود استفاده کرد. مثلا اگر می خواهیم تصاویر را مجبور کنیم تا در یک خط در کنار هم باقی بمانند می توانیم از مقادیر این ویژگی بهره ببریم.

 
جدول زیر تمام مقادیر و رفتارهای آنها را بصورت خلاصه بیان می کند:

  خط جدید Space و tab شکستن به خط بعد
normal از بین می رود از بین می رود می شکند
pre حفظ می شود حفظ می شود نمی شکند
nowrap از بین می رود از بین می رود نمی شکند
pre-wrap حفظ می شود حفظ می شود می شکند
pre-line حفظ می شود از بین می رود می شکند

 
با تغییر مقادیر در دموی زیر با این ویژگی بهتر آشنا شوید:

 

See the Pen white-space by Mojtaba Seyedi (@seyedi) on CodePen.


 

7 دیدگاه برای “white-space

  1. من در یک کلاس css بعد از دستور pre از text decoration: under line استفاده کردم ولی جاهایی که اسپیس هم هست خط زیر کشیده شد. چطور میشه حلش کرد؟

  2. سلام دوست من
    من در حال یادگیری این زبان و حرفه ی شیرین و زیبا هستم. خیلییییی حال کردم با پستت عالی بود.
    واقعا دمت گرم و تشکر میکنم از وقتی که گذاشتی برای درست کردن این سایت و اینجور پست ها.
    امیدوارم موفق باشی

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *