خصوصیت white-space
مثال (خصوصیت white-space)
در این مثال تنظیم شده است که متون داخل پاراگراف هرگز نشکند و به خط بعدی نرود:
{
white-space:nowrap;
}
تعریف و کاربرد
با استفاده از خصوصیت white-space می توان مشخص کرد که رفتن به سر خط (Enter) داخل یک عنصر چگونه مدیریت شوند.
| مقدار پیشفرض | normal |
|---|---|
| ارث بری | بله |
| نسخه | CSS1 |
| JavaScript ساختار | object.style.whiteSpace="pre" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت 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)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 14180
دیدگاه‌ها
با عرض سلام و خسته نباشید خدمت اساتید سایت بیاموز
من متنی رو طولانی گذاشتم در یک فایل html برای تمرین کردنم طبیعتا اگه متن طولانی باشه و فراتر از حد نرمال مانیتور یا صفحه ی دسکتاپ باشه خود به خود اسکرول عمودی به وجود میاد اما واسه من نمیدونم چرا در پایین صفحه اسکرول افقی بوجود اومده و من کاری نمیتونم کنم ؟ باید چه تنظیماتی را با css انجم بدم تا این مشکل رفع بشه؟
سلام و درود
همان طور که در آموزش بالا متوجه شدید، با استفاده از خصوصیت white-space زمانی که با مقدار nowrap تنظیم شده باشد در این حالت متن هیچگاه به خط بعدی نمی رود و باعث اسکرول افقی صفحه خواهد شد. به همان طریق که در تصویر بالا مشاهده می کنید.
اما اسکرول عمودی که سمت راست یا چپ صفحه نمایش ظاهر می شود ، کاملا توسط مرورگر مدیریت می شود و زمانی که ارتفاع محتوای صفحه ما از ارتفاع مونیتور یا صفحه نمایش ما بیشتر باشد، اسکرول می خورد و چیزی نیست که توسط ما مدیریت شود!
سلام.لطفا فرق بین pre-line و pre-wrapرو باز کنید.
سلام
تفاوت بین مقدار pre-line و مقدار pre-wrap در این است:
فرض کنید که یک متن درون یک پاراگراف داریم که بین آنها تعداد زیادی فاصله ی سفید است و خصوصیت pre-line برای آنها تعریف شده است. خب بعد از اجرای کد، فاصله های سفید از بین می روند و به یک فاصله ی سفید تبدیل می شوند مثال:
<p >
a b
</p >
متن بالا پس از اجرای کد به صورت زیر در می آید:
a b
اما اگر مقدار pre-wrap را تعریف کنید، متن به همان صورت باقی خواهد ماند و فاصله های سفید به یک فاصله ی سفید تبدیل نخواهند شد.
ابتدا متشکر از پاسختون.پس pre-wrap و pre فرقی ندارند؟چون کاری که pre-wrap در مثال بالا انجام میده,عینا pre هم انجام میده.
تفاوت pre و pre-wrap در شکستن خط است. لطفا مثال زیر را مشاهده کنید:
jsfiddle.net/BoltClock/2TA8g/1/
درواقع در استفاده از pre-wrap در صورتی که درون باکس مورد نظر فضایی نباشد، به صورت ضروری خط شکسته می شود اما در استفاده از pre، خط شکسته نمی شود.