در قسمتهای گذشته در مورد دستور @supports توضیحاتی رو قرار دادیم و شما رو با اون آشنا کردیم و نحوه استفاده از اون رو بهتون گفتیم. در این جلسه قصد داریم در مورد سه ویژگی overflow-wrap و word-break و word-wrap صحبت کنیم.
ویژگی overflow-wrap به شما این امکان رو میده مشخص کنید که آیا مرورگر میتونه خط متن مورد نظر رو بشکنه و به خطهای بعدی انتقال بدهد یا خیر. این ویژگی زمانهایی که یک کلمه خیلی بلند و ناخواسته وجود داشته باشه، نقش خودش رو نشون میده و کمک میکنه تا ظاهر و قالب بندی سایتمون به هم نریزه. میزان پشتیبانی مرورگرها از این ویژگی بصورت زیر هست:
همونطور که میبینید تقریبا همه مرورگرها از این ویژگی پشتیبانی میکنن. در بعضی از مرورگرها باید از ویژگی جایگزین دیگه ای نیز استفاده کنید تا با اینکار همه مرورگرها از اون پشتیبانی کنن. نحوه استفاده از این ویژگی بصورت زیر هست:
.example { overflow-wrap: break-word; } |
مقادیری که این ویژگی قبول میکنه بصورت زیر هست:
مثال و دموی زیر رو در نظر بگیرید:
همونطور که میبینید یک باکس یا Container قرار داده شده و مقداری متن درون اون قرار گرفته. در حالت اول استایل پیش فرض و نرمال اعمال میشه و میبینید که کلمه طولانی که وجود داره از محدوده باکس خارج شده و ظاهر و قالب رو به هم ریخته و باعث بی نظمی شده. زمانی که بر روی دکمه Toggle کلیک میکنید، کلاس ow با استفاده از javascript به پاراگراف اضافه میشه و این کلاس در css بصورت زیر تعریف شده:
.ow { overflow-wrap: break-word; word-wrap: break-word; hyphens: auto; } |
همونطور که میبینید از ویژگی overflow-wrap استفاده کردیم و مقدار اون رو برابر با break-word قرار دادیم. زمانی که بر روی دکمه کلیک میشه، کلمه مورد نظر شکسته میشه و در محدوده مربوط به باکس قرار میگیره. بصورت زیر:
ویژگی overflow-wrap برای المنتهایی که متنشون قابل مدیریت کردن نیستن و کاربران هر چیزی رو میتونن وارد کنن، خیلی میتونه بدرد بخوره. بیشتر در بخش نظرات با چنین مواردی بر میخوریم. با اینکار اگر کاربران URL یا کلمه ای طولانی رو وارد کنن، دیگه به مشکلی بر نخواهیم خورد و قالب سایت هم منظم باقی خواهد ماند.
ویژگی overflow-wrap نامی استاندارد برای ویژگی قدیمی word-wrap می باشد. ویژگی word-wrap در ابتدا مخصوص مرورگر Internet Explorer بود که بعدا توسط دیگر مرورگرها و بدون اینکه استاندارد شده باشه، مورد استفاده قرار گرفت. این دو ویژگی مقادیر یکسانی رو دریافت میکنن و دقیقا همانند همدیگر نیز رفتار میکنن. تنها فرقی که دارند این هست که ویژگی overflow-wrap استاندارد شده ویژگی word-wrap هست. با این حال همه مرورگرها از ویژگی word-wrap به عنوان جایگزینی برای overflow-wrap پشتیبانی میکنن و بهتره از هر دو بصورت همزمان استفاده کنید. هر دو ویژگی معتبر هستند.
این دو ویژگی بسیار شبیه به هم هستن و در اکثر موارد میتونن مشکلات مشابه رو برطرف کنن. بصورت خلاصه میتونیم تفاوت زیر رو برای این دو ویژگی بیان کنیم:
در جلسات بعد با ادامه آموزش در خدمتتون هستیم.
امیدوارم از این مطلب خوشتون اومده باشه.
موفق باشید
یا علی
Source
سون لرن • آموزش...برچسب : نویسنده : استخدام کار 7learn بازدید : 273