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

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

دسته بندی موضوعات
سفارش تبلیغات

خصوصیت 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 به بالا این خصوصیت رو پشتیبانی میکنند.

 

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

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

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

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : میترا رحیمی

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مدرس و مسلط به برنامه نویسی سمت سرور با PHP MVC و برنامه نویسی سمت کلاینت با html 5 , css3 , jquery , مبانی سئو و سیستم مدیریت محتوای وردپرس

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • حسین حسنی

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

  • nimsite

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

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

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

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟