40٪ تخفیف با کد Ketab بمناسبت هفته کتاب و کتاب خوانی ...
زمان باقی مانده
سبد (0)

تبلیغات

خصوصیت white-space

مثال (خصوصیت white-space)

در این مثال تنظیم شده است که متون داخل پاراگراف هرگز نشکند و به خط بعدی نرود:

p
{
white-space:nowrap;
}
خودتان امتحان کنید »

تعریف و کاربرد

با استفاده از خصوصیت white-space می توان مشخص کرد که رفتن به سر خط (Enter) داخل یک عنصر چگونه مدیریت شوند.

مقدار پیشفرض normal
ارث بری بله
نسخه CSS1
JavaScript ساختار object.style.whiteSpace="pre"

پشتیبانی مرورگرها

Internet Explorer Firefox Opera Google Chrome Safari

تمام مرورگرهای اصلی، خصوصیت  white-space را پشتیبانی می کنند.

توجه: مرورگر Internet Explorer 7 و نسخه های قبلی آن، مقدار "inherit" را پشتیبانی نمی کند. IE8 به !DOCTYPE! نیاز دارد. IE9 مقدار "inherit" را پشتیبانی می کند.


مقدارهای خصوصیت

مقدار توضیحات نمایش دادن
normal

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

نمایش دادن »
nowrap

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

نمایش دادن »
pre

خطوط فاصله توسط مرورگر نگه داشته می شوند. متن تنها زمانی به خط بعدی می رود که با عملیات شکستن خط مانند تگ <pre> مواجه شود.

نمایش دادن »
pre-line

هر تعداد خط فاصله می تواند دنبال هم تکرار شوند. هنگامی که نیاز شد متن به خط بعدی می رود. با استفاده از line break ها نیز متن به خط بعدی می رود.

نمایش دادن »
pre-wrap

خطوط فاصله توسط مرورگر نگه داشته می شود. . هنگامی که نیاز شد متن به خط بعدی می رود. با استفاده از line break ها نیز متن به خط بعدی می رود.

نمایش دادن »
inherit تعیین می کند که باید از والدش، ارث بری داشته باشد.  

بیاموزهای مرتبط

Styling Text (بیاموز CSS)

دیدگاه‌ها  

0 # محمد برزگر 1398-06-09 15:20
با عرض سلام و خسته نباشید خدمت اساتید سایت بیاموز
من متنی رو طولانی گذاشتم در یک فایل html برای تمرین کردنم طبیعتا اگه متن طولانی باشه و فراتر از حد نرمال مانیتور یا صفحه ی دسکتاپ باشه خود به خود اسکرول عمودی به وجود میاد اما واسه من نمیدونم چرا در پایین صفحه اسکرول افقی بوجود اومده و من کاری نمیتونم کنم ؟ باید چه تنظیماتی را با css انجم بدم تا این مشکل رفع بشه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1398-06-10 12:10
سلام و درود
همان طور که در آموزش بالا متوجه شدید، با استفاده از خصوصیت white-space زمانی که با مقدار nowrap تنظیم شده باشد در این حالت متن هیچگاه به خط بعدی نمی رود و باعث اسکرول افقی صفحه خواهد شد. به همان طریق که در تصویر بالا مشاهده می کنید.
اما اسکرول عمودی که سمت راست یا چپ صفحه نمایش ظاهر می شود ، کاملا توسط مرورگر مدیریت می شود و زمانی که ارتفاع محتوای صفحه ما از ارتفاع مونیتور یا صفحه نمایش ما بیشتر باشد، اسکرول می خورد و چیزی نیست که توسط ما مدیریت شود!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # شریف 1394-04-29 20:19
سلام.لطفا فرق بین pre-line و pre-wrapرو باز کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1394-04-29 21:33
سلام
تفاوت بین مقدار pre-line و مقدار pre-wrap در این است:
فرض کنید که یک متن درون یک پاراگراف داریم که بین آنها تعداد زیادی فاصله ی سفید است و خصوصیت pre-line برای آنها تعریف شده است. خب بعد از اجرای کد، فاصله های سفید از بین می روند و به یک فاصله ی سفید تبدیل می شوند مثال:
<p >

a             b

</p >

متن بالا پس از اجرای کد به صورت زیر در می آید:
a b

اما اگر مقدار pre-wrap را تعریف کنید، متن به همان صورت باقی خواهد ماند و فاصله های سفید به یک فاصله ی سفید تبدیل نخواهند شد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # شریف 1394-05-02 00:55
ابتدا متشکر از پاسختون.پس pre-wrap و pre فرقی ندارند؟چون کاری که pre-wrap در مثال بالا انجام میده,عینا pre هم انجام میده.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # احسان عباسی 1394-05-02 10:10
تفاوت pre و pre-wrap در شکستن خط است. لطفا مثال زیر را مشاهده کنید:
jsfiddle.net/BoltClock/2TA8g/1/
درواقع در استفاده از pre-wrap در صورتی که درون باکس مورد نظر فضایی نباشد، به صورت ضروری خط شکسته می شود اما در استفاده از pre، خط شکسته نمی شود.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی