cssblog.ir logo
P

white-space

جلوگیری از شکستن متن در فاصله‌ها

مشخصه white-spacing رفتار عناصر را در مورد شکستن خط (text wrapping) در هنگامی که فضا کمتر از حداقل فضای مورد نیاز برای نوشته شدن متن است، را تعیین می کند

در حالت عادی بدلیل اینکه white-spacing بصورت پیشفرض برابر باnormal می‌باشد هنگامی که متن قرار گرفته در یک عنصر امکان نمایش در یک خط را نداشته باشد بصورت بیشتر از یک خط نمایش داده می‌شود و اصطلاحا عمل soft wrap روی انجام می‌شود. برای مثال:

با استفاده از مشخصه white-spacing می توانیم جلوی عملwrap (شکستن) را بگیریم. برای انجام چنین کاری کافی است مقدار nowrap را به این مشخصه بدهیم. مانند: 

همانطور که در مثال فوق مشاهده می‌کنید بدلیل تعیین مقدارnowrap متن داخل عنصر به همان شکل یک خطی نمایش داده می شود

مقدار pre

ابتدا به کد HTML زیر دقت کنید


Vix ea dolor adolescens , id unum dicunt omnesque eum. Ad sit facilisi prodesset expetendis. His ne consequat assentior, ius ex accusam reformidans. Ut eos civibus petentium, nec ei malis altera posidonium. An eos vero tincidunt vituperatoribus, regione conceptam ne eum

مرورگر این کد را به این شکل نمایش خواهد داد:

همانطور که مشاهده می کنید مرورگر در هنگام رِندِر کردن این کد تمام کارکترهای \n (همان کارکتر کلید enter یا سرِخط) و فاصله ها را از بین می برد و نادیده می گیرد؛ اگر چنین نبود باید قبل از متن داخل عنصر یک enter را لحاظ می کرد و یک خط خالی در آنجا دیده می شد و همچنین مقداری فاصله در قبل از متن لحاظ می شد. اگر بخواهیم مرورگر را مجبور به لحاظ کردن این فاصله ها و کارکترهای \n بکنیم می توانیم از مقدارpre برای white-spacing استفاده کنیم. این مقدار کاری مشابه با تگ < pre > را انجام می دهد. در این حالت هیچ عمل شکستن خطی رخ نمی‌دهد مگر در جاهایی که در HTML کارکتر \n وارد شده باشد.

مقدار pre-wrap

این مقدار مانندpre عمل می کند با این تفاوت که عمل شکستن خط (wrap) را نیز همچنان بصورت خودکار در مواقع لازم انجام می‌دهد. مانند:

مقدار pre-line

مقدار pre-line باعث می شود تا قسمت هایی از کد که \n وارد شده است، لحاظ شود اما فاصله های اضافی همچنان نادیده گرفته خواهند شد.

 کاربرد جالب white-space در هنگام ساخت لیست های با اسکرول افقی

یک کاربرد جالب این مشخصه در هنگامی است که می خواهیم لیست‌هایی با اسکرول افقی بسازیم که میزان اسکرول لیست‌ها بصورت خودکار توسط مرورگر محاسبه و انجام شود. برای انجام اینکار کافی است مانند مثال عناصر را بصورت inline درآوریم و مشخصه white-space والد را رویnowrap قرار دهیم.

 در هنگام استفاده از این روش فراموش نکنید که white-space داخل عناصر را مجددا به حالت نرمال بازگردانید

جدول تشریح هریک از مقادیر

در جدول زیر ارتباط هریک از مقادیر مشخصه white-space را با فاصله/تب یا شکستن متن و کارکتر سرِخط مشاهده می‌کنید

مقدار کارکتر سرِخط یا همان New Line فاصله‌ها و تب‌ها شکستن متن
normal نادیده گرفته می‌شوند نادیده گرفته می‌شوند انجام می‌شود
pre اعمال می‌شود اعمال می‌شود رخ نمی‌دهد
nowrap نادیده گرفته می‌شوند نادیده گرفته می‌شوند رخ نمی‌دهد
pre-wrap اعمال می‌شود اعمال می‌شود انجام می‌شود
pre-line اعمال می‌شود نادیده گرفته می‌شوند انجام می‌شود

جدول به فوق به نقل از css-tricks بیان شده است 

دیدگاه کاربران

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

نکاتی درباره دیدگاه ها

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند