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;  
}

 

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

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

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

 

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