در ادامه سلسله مقالات آموزش CSS در این مقاله در مورد خصوصیت white-space در سی اس اس صحبت خواهیم کرد.
زمانی که متنی را داخل صفحه وب قرار می دهید،رفتار پیش فرض مروگر به این صورت است که فاصله های خالی بین کلمات و متون را نادیده گرفته و فقط یک فاصله بین آنها قرار می دهد ( مگر آنکه از کاراکتر خاص به منظور ایجاد فاصله استفاده کرده باشید) همچنین متون فقط زمانی شکسته شده و به خط بعد منتقل می شوند که محتوای متن به انتهای والد خود برسد و مرورگر شکست خط هایی که در ادیتور خود ایجاد کرده ایم را نادیده می گیرد.
از ویژگی white-space به منظور کنترل فضاهای خالی موجود در متن استفاده می کنیم که همانطور که گفتیم فضای خالی می تواند یک تک فاصله ای باشد که توسط کلید space یا tab ایجاد شده است، یا یک سرخط باشد که توسط کلید enter ایجاد شده است.
فرض کنید قصد داریم در سایت خود شعری را نمایش دهیم،قطعا نیاز خواهیم داشت بین مصرع های هر بیت فاصله ایجاد کرده و هر بیت را نیز در خطی جداگانه نمایش دهیم،اما در زمان نمایش خروجی فاصله های خالی و شکست خط ها نادیده گرفته می شوند و شعر ما به درستی نمایش داده نخواهد شد اما با استفاده از ویژگی white-space می توانیم این موضوع را کنترل کنیم.
مقادیر white-space
مقادیری که این ویژگی می تواند بپذیرد را در قطعه کد زیر مشاهده می کنید که در ادامه هر کدام را جداگانه بررسی خواهیم کرد.
white-space: normal | pre | nowrap | pre-wrap | pre-line
مقدار normal
این مقدار،مقدار پیش فرض مرورگر می باشد. در این حالت تمام فضاهای خالی متن یک عنصر از بین می رود وشکست خط ه نیز نادیده گرفته می شوند. متن خروجی زمانی به خط بعد شکسته می شود که به لبه عنصر نگهدارنده اش برسد و دیگری فضایی برای آن خط وجود نداشته باشد. به عنوان مثال اگر بین کلمات خود 3 فاصله (space) قرار داده باشیم در زمان نمایش خروجی این 3 فاصله از بین رفته و فقط یک فاصله بین کلمات قرار داده می شود.اگر این ویژگی را تغییر دادید و قصد داشتید آن را به حالت پیش فرض برگردانید می توانید از کد زیر استفاده کنید.
p {
white-space: normal;
}
مقدار pre
از این مقدار زمانی استفاده می کنیم که بخواهیم متون به همان صورتی در خروجی نمایش داده شوند که در کد نوشته شده اند. یعنی فضاهای خالی و خطوط جدید ایجاد شده حفظ شوند. این مقدار از نام تگ <pre> در HTML که دقیقا همین وظیفه را به عهده دارد گرفته شده است.در این حالت با توجه این که متن فقط زمانی می شکند که در کد خود یک خط جدید ایجاد کرده باشید احتمال سرریز شدن متن از والد خود وجود دارد که باید با اسفتاده از خاصیت overflow , text-overflow این مسئله را کنترل کنید
p {
white-space: pre;
overflow:hidden;
text-overflow:ellipsis;
}
مقدار pre-wrap
از این حالت زمانی استفاده می شود که که بخواهید تمام حالات pre داشته باشید اما زمانی که متن به انتهای والد خود می رسد شکسته شده و به خط بعد منتقل شود.در این حالت چون متن با رسیدن به لبه عنصر نگهدارنده اش شکسته می شود دیگر سرریزی اتفاق نخواهد افتاد و نیازی به کنترل سرریز متن ندارید.
p {
white-space: pre-wrap;
}
مقدار nowrap
این مقدار زمانی کاربرد دارد که بخواهید متن همان حالت normal را داشته باشد یعنی فضاهای خالی از بین بروند اما به هیچ عنوان متن شکسته نشود.این حالت نیز می تواند موجب سرریز متن از والد خود شود که باید این مسئله را کنترل کنید.
p {
overflow:hidden;
text-overflow:clip;
white-space: nowrap;
}
مقدار nowrap
با استفاده از این مقدار می توانید فضاهای خالی را از بین ببرید اما سرخط ها را به همان صورت که در کد نوشته شده اند حفظ کنید و همینطور زمانی که متن به لبه نگهدارنده اش برسد بشکند.در این حالت نیز با توجه به شکسته شدن متن،مسئله سرریز متن وجود نخواهد داشت.
p {
white-space: pre-line;
}
جدول زیر تمام مقادیر و رفتارهای آنها را بصورت خلاصه بیان می کند:
| مقدار |
خط جدید |
Space و tab |
شکستن به خط بعد |
| normal |
از بین می رود |
از بین می رود |
می شکند |
| pre |
حفظ می شود |
حفظ می شود |
نمی شکند |
| nowrap |
از بین می رود |
از بین می رود |
نمی شکند |
| pre-wrap |
حفظ می شود |
حفظ می شود |
می شکند |
| pre-line |
حفظ می شود |
از بین می رود |
می شکند |
نکته : از این ویژگی جدا از متن برای عناصر خطی دیگر هم می شود استفاده کرد. مثلا اگر می خواهیم تصاویر را مجبور کنیم تا در یک خط در کنار هم باقی بمانند می توانیم از مقادیر این ویژگی بهره ببریم.
برای آشنایی بیشتر با این ویژگی می توانید دموی زیر را بررسی کنید
امیدوارم مطاطعه این مقاله برای شما مفید بوده باشد.با ادامه آموزش های CSS با ما همراه باشید.
کامنت جدید ...