آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 51) : آشنایی با ویژگی white-space

همونطور که اطلاع دارید در جلسه قبل در مورد ویژگی های Perspective و Position و Resize توضیحاتی رو قرار دادیم و شما رو با استفاده از مثال با اونا آشنا کردیم. در این جلسه قصد داریم در مورد ویژگی white-space که یک ویژگی کاربردی و مفید هست، بیشتر آشناتون کنیم. این ویژگی شاید برای خیلی از کسانی که تازه طراحی وب رو شروع میکنن و یا حتی کسانی که تجربه دارند به خوبی شناخته شده نباشه و گاهی اوقات باعث گیج شدن اونا بشه. در این آموزش سعی میشه با استفاده از مثالهای متنوع، این ویژگی به همراه تمامی مقادیر اون رو با هم بررسی کنیم و بصورت کامل با اون آشنا بشیم. برای آموزش از این لینک بعنوان منبع استفاده میکنیم.

همونطور که میدونین زمانی که در کدهای HTML تعدادی فضای خالی یا Space رو در کنار یکدیگر قرار میدیم، مرورگر بصورت اتوماتیک اونا رو تر و تمیز و حذف میکنه و اونا رو بصورت یک Space در میاره و در خروجی نمایش میده. پس مثلا اگر در ویرایشگر Mohammad           Esfandiari رو بنویسید، در خروجی Mohammad Esfandiari نمایش داده میشه و از Space های بیشتر صرف نظر میشه. این ویژگی اکثر موارد بسیار مفید است و باعث میشه که درون ویرایشگر و کدهای HTML بتونیم با Indent دادن به کدها، خوانایی کدها رو بالاتر ببریم در صورتی که خروجی اصلا توجهی به فضای خالی نمیکنه و در خروجی هیچ تاثیری ندارد.

گاهی اوقات پیش میاد که بخوایم همونطور که متنها رو درون ویرایشگر دیده میشه، در خروجی نیز نمایش داده بشه. برای اینکار میتونین از تگ pre استفاده کنید. این تگ محدودیتهایی داره و نمیتونین هر کاری رو با استفاده از اون انجام بدین. با استفاده از ویژگی white-space میتونین کنترل بهتر و بیشتری بر روی خروجی داشته باشید و به چیزی که میخواید به راحتی دست پیدا کنید.

در اینجا مقادیر موجود برای ویژگی white-space رو با هم بررسی میکنیم و برای هر کدام تصاویری رو نیز قرار میدیم تا کاملا با اونا آشنا بشید.

مقدار normal

این مورد، مقدار پیش فرض این ویژگی می باشد. زمانی که از این مقدار استفاده می کنید، خروجی همانند تگ pre خواهد بود. چون این مورد، مقدار پیش فرض است پس در حالت عادی نیازی نیست که بصورت دستی اون رو مشخص کنید و اگر استفاده هم نکنید، این کار بصورت پیش فرض انجام میشه. اما در بعضی مواقع برای بازنویسی کردن یا تغییر مقادیر فرزندان، مجبور میشیم که اون رو بصورت دستی برابر با normal قرار بدیم. اگر در HTML یک پاراگراف بصورت زیر قرار بدیم:

خروجی در مرورگر بصورت زیر میشه:

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

مقدار nowrap

این مقدار یکی از مقادیر متداول و پرکاربرد برای ویژگی white-space است، زیرا علاوه بر داشتن ویژگی های مقدار normal، دیگه کاری به فضای محدود خروجی ندارند و انتقال به خط بعدی بصورت طبیعی رو نیز در این حالت نخواهیم داشت. در این حالت اگر کد زیر رو داشته باشیم:خروجی در مرورگر بصورت زیر خواهد شد:

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

مقدار pre

در این حالت هر چیزی که در ویرایشگر میبینید، در خروجی نیز به همون صورت خواهید دید و همه فواصل و خطوط جدید پابرجا خواهند ماند. مثلا اگر کد زیر رو داشته باشیم:

خروجی بصورت زیر خواهد بود:

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

مقدار pre-line

این مقدار در همه موارد جز یک مورد، کاملا شبیه به مقدار normal می باشد. تفاوت بر سر این است که در این حالت، خطوط جدیدی که در کد HTML به وجود اومده، در خروجی نیز نمایش داده خواهند شد. Space های بیشتر از یکی، همانند قبل به یک Space تبدیل خواهند شد. اگر کدی بصورت زیر داشته باشیم:

خروجی بصورت زیر خواهد شد:

مقدار pre-wrap

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

خروجی بصورت زیر خواهد بود:

به همین راحتی. برای مطالعه بیشتر در مورد ویژگی white-space میتونین این لینک رو مطالعه کنید.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source