جلسه ی پنجاه و سوم: خصوصیت white-space در CSS

خصوصیت white-space در CSS

در جلسات پیش در مورد متن و فواصل بین آن ها صحبت نموده ایم. (برای دیدن آموزش تگ های جامع HTML کلیک کنید) در این جلسه می خواهیم در مورد خصوصیت white-space در CSS صحبت نماییم. (برای دیدن آموزش CSS به زبان ساده کلیک کنید)

خصوصیت white-space در CSS چیست؟

در آموزش های قبلی مشاهده کرده ایم زمانی که یک متن را درون تگ p قرار می دهیم فواصل بین آن به کمترین حد ممکن می رسد. حال فرض کنید که ما می خواهیم متنی بنویسیم که فواصل بین آن برای ما اهمیت دارد و می خواهیم فواصل آن از بین نرود.

خصوصیت white-space در CSS برای ایجاد یک کنترل کننده بر روی فواصل استفاده می شود. خصوصیت white-space در معنای لغت به معنای فضای سفید می باشد. این فضای سفید ممکن است از یک یا چندین فاصله ایجاد شده باشد.

چگونه از خصوصیت white-space در CSS استفاده کنیم؟

در حالت معمولی شما نمی توانید از خصوصیت white-space در CSS استفاده کنید. زیرا فواصل بین آن ها از بین می رود و به کوتاه ترین فاصله ی ممکن تبدیل می شود. حال در صورتی که بخواهید از این خصوصیت استفاده کنید باید حالات مختلف آن را بشناسید که عبارتند از:

  1. normal
  2. pre
  3. nowrap
  4. pre-wrap
  5. pre-line

حالت Normal

حالت Normal به صورت پیشفرض بر روی خصوصیت white-space وجود دارد. در این حالت تمامی فواصل شکسته شده و هیچ اتفاق خاصی نمیافتد. (بود یا نبودش فرقی نمیکنه) به نمونه کد پایین توجه کنید:

p {
  white-space: normal;
}

حالت Per

در حالت per یعنی اینکه ما میخواهیم نوشته ی ما همانطوری که نوشته شده است نمایش داده شود و تمامی فواصل یا تغییر خط ها به گونه ای که ما خواستار آن هستیم نمایش داده شوند. در این شیوه ممکن است متن نوشته شده توسط ما سر ریز کند و از کادر مورد نظر ما خارج شود. (بهتر از در استفاده از این حالت دقت کافی را داشته باشیم)

این حالت از خصوصیت white-space در CSS همانند تگ per عمل می کند. شما می توانید از هر کدام که دوست داشتید استفاده کنید. یادتان باشد که عموما تگ هایی از زبان نشانه گذاری HTML حذف می شوند و معادل آن ها به CSS اضافه می شود پس در در استفاده بهتر است که از حالت per در این خصوصیت استفاده کنیم. به نمونه کد پایین توجه کنید:

کد HTML:

<div class="box">
 <p>
   در          این           متن          فواصل        زیاد                هستند         ....
 </p>
</div>

کد CSS:

.box {
  width: 600px;
  height: 300px;
  font-size: 30px;
  color: #000;
  border: 3px solid #888;
  border-radius: 15px;
  margin: 0px 50px;
  padding: 10px;
  float: right;
  background-color:#a3d29c;
  }

.box p {
  white-space: pre;
}

خروجی کد بالا:

خصوصیت white-space در CSS

حالت Nowarp

حالت nowarp مانند حالت Normal عمل می کند و نمی گذارد فواصل بیش از اندازه باشد. در مواردی از این حالت استفاده میکنیم که بخواهیم از خصوصیت Text-Overflow استفاده کنیم. (برای دیدن آموزش خصوصیت Text-overflow در CSS کلیک کنید)

حالت per-warp

در حالت Per-Warp از خصوصیت White-space در CSS به این گونه است که تمامی فواصلی که ما درون متن قرار می دهیم به همان شکل قرار میگیرند اما زمانی که متن مورد نظر ما به انتهای کادر تعریف شده می رسد به صورت اتومات شکسته به خط بعدی منتقل می شود.

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

کد HTML:

&amp;lt;div class="box"&amp;gt;
 &amp;lt;p&amp;gt;
این      متن      دارای      ویژگی     per-warp      میباشد      زیرا      زمانی      که به          آخر      خط      میرسد      به خط       بعدی      منتقل           ....... 
&amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;

کد CSS:

.box {
  width: 600px;
  height: 300px;
  font-size: 30px;
  color: #000;
  border: 3px solid #888;
  border-radius: 15px;
  margin: 0px 50px;
  padding: 10px;
  float: right;
  background-color:#a3d29c;
  }

.box p {
  white-space: pre-wrap;
}

خروجی کد بالا:

خصوصیت White-space در CSS

حالت per-line

کاربرد حالت per-line در خصوصیت White-space در CSS این گونه است است که تمامی فواصل به کمترین حد ممکن خود میرسد همانند حالت Normal، اما زمانی که ما خط جدیدی ایجاد میکنیم آن را حفظ میکند. یعنی هرگاه که ما دکمه ی Enter را بزنیم و وارد یک خط جدید بشویم خروجی کد ما نیز یک خط جدید را ایجاد میکند. به نمونه کد زیر توجه کنید:

کد HTML:

&amp;lt;div class="box"&amp;gt;
 &amp;lt;p&amp;gt;
هر
کلمه
در
یک
سطر
میباشد.
 &amp;lt;/p&amp;gt;
&amp;lt;/div&amp;gt;

کد CSS:

.box {
  width: 600px;
  height: 300px;
  font-size: 30px;
  color: #000;
  border: 3px solid #888;
  border-radius: 15px;
  margin: 0px 50px;
  padding: 10px;
  float: right;
  background-color:#a3d29c;
  }

.box p {
  white-space: pre-line;
}

خروجی کد بالا:

خصوصیت white-space در CSS

خلاصه مطلب:

  1. خصوصیت white-space در CSS برای ایجاد یک کنترل کننده بر روی فواصل استفاده می شود.
  2. حالت Normal به صورت پیشفرض بر روی خصوصیت white-space وجود دارد.
  3. در حالت per یعنی اینکه ما میخواهیم نوشته ی ما همانطوری که نوشته شده است نمایش داده شود و تمامی فواصل یا تغییر خط ها به گونه ای که ما خواستار آن هستیم نمایش داده شوند.
  4. حالت nowarp مانند حالت Normal عمل می کند و نمی گذارد فواصل بیش از اندازه باشد.
  5. در حالت Per-Warp به این گونه است که تمامی فواصلی که ما درون متن قرار می دهیم به همان شکل قرار میگیرند اما زمانی که متن مورد نظر ما به انتهای کادر تعریف شده می رسد به صورت اتومات شکسته به خط بعدی منتقل می شود.
  6. کاربرد حالت per-line در خصوصیت White-space در CSS این گونه است است که تمامی فواصل به کمترین حد ممکن خود میرسد همانند حالت Normal، اما زمانی که ما خط جدیدی ایجاد میکنیم آن را حفظ میکند.
ابوالفضل کلهری

فعال در زمینه های ui و ux و طراحی وب سایت مسلط به زبان های نشانه گذاری HTML و CSS و همچنین در زمینه ی آموزش زبان های HTML و CSS نیز فعالیت دارم . امیدوارم با آموزش هایی که در این سایت قرار می دهم موجب پیشرفت شما عزیزان باشم.

دیدگاه ها
  • قبل از ارسال دیدگاه خود قوانین بخش دیدگاه ها را مطالعه کنید. ارسال دیدگاه به معنی پذیرش این قوانین است. قوانین بخش دیدگاه ها