آموزش طراحی وب

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

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

white space

فصل چهارم : Properties در CSS

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

سلام به همراهان همیشگی مدرسه مجازی ایرانیان

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

 

خصوصیت white-space

گاهی اوقات پیش میاد که میخوایم باکس یا لایه ی ما نسبت به متن درون باکس تغییر اندازه پیدا کنه و ادامه ی متن بصورت شکسته به خط بعدی منتقل نشه؛ یا برعکس میخوایم زمانی که متن طولانی بود به اندازه ی عرض باکس نمایش پیدا کنه و ادامه متن به خط بعدی منتقل بشه.

به این منظور از خصوصیت white-space استفاده می کنیم.

 

قاعده دستوری white-space

 

مقادیر خصوصیت white-space

این خصوصیت مقادیر زیر رو شامل میشه:

nowrap : با انتخاب این مقدار متن شما شکسته نشده و تا انتها، متن در یک خط نمایش داده میشه .

pre : با انتخاب این مقدار ، مرورگر تشخیص میده در صورتی که شما در کد html تون و متنتون از line break استفاده کرده باشید به همون صورت نمایش میده.

pre-line : متن رو در صورتی که از line break ها استفاده کنید (enter) به خط بعد منتقل میکنه؛ در این حالت تمامی space ها اعمال میشه.

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

 

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

 

امیدوارم که این مطلب آموزشی براتون مفید بوده باشه.

موفق و پاینده باشید 🙂

تهیه شده در مدرسه مجازی ایرانیان

حسین همت یار

نویسنده در مدرسه مجازی ایرانیان ، دانشجوی رشته IT ، طراح وب و علاقه مند به تازه های دنیای اینترنت و وب و البته لینوکس

دیدگاه ۴

  • من فکر میکنم استفده از مقدار pre-line توی این خاصیت برای صفحه html بسیار مناسبه چون دیگه نیازی نیست هر دفه برا ی رفتن به خط بعد از تگ استفاده کنیم و فقط کافیه اینتر رو بزنیم.

  • ممنون ولی یه اشتباه کوچیک!
    مقدار pre-line فقط یکی از همه ی space ها رو اعمال میکنه.
    مرسی از شما… تصحیح کنید لطفا

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین