ویژگی 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.
بسیار عالی
سلام
بسیار عالی
ببخشید منظور از pre-line چیه ؟ سر خط چیه ؟ منظور از سر خط چیست ؟
میشه توضیح بدید ؟
ممنون
سلام. منظور از سر خط، خط جدید یا رفتن به خط جدید هستش. pre-line هم که تا جایی که امکانش بوده توضیحش داده شه.
من در یک کلاس css بعد از دستور pre از text decoration: under line استفاده کردم ولی جاهایی که اسپیس هم هست خط زیر کشیده شد. چطور میشه حلش کرد؟
خیلی توضیح خوبی بود, مرسی
سلام دوست من
من در حال یادگیری این زبان و حرفه ی شیرین و زیبا هستم. خیلییییی حال کردم با پستت عالی بود.
واقعا دمت گرم و تشکر میکنم از وقتی که گذاشتی برای درست کردن این سایت و اینجور پست ها.
امیدوارم موفق باشی
دمت گرم