آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 41) : ویژگی overflow-wrap

در قسمتهای گذشته در مورد دستور @supports توضیحاتی رو قرار دادیم و شما رو با اون آشنا کردیم و نحوه استفاده از اون رو بهتون گفتیم. در این جلسه قصد داریم در مورد سه ویژگی overflow-wrap و word-break و word-wrap صحبت کنیم.

ویژگی overflow-wrap به شما این امکان رو میده مشخص کنید که آیا مرورگر میتونه خط متن مورد نظر رو بشکنه و به خطهای بعدی انتقال بدهد یا خیر. این ویژگی زمانهایی که یک کلمه خیلی بلند و ناخواسته وجود داشته باشه، نقش خودش رو نشون میده و کمک میکنه تا ظاهر و قالب بندی سایتمون به هم نریزه. میزان پشتیبانی مرورگرها از این ویژگی بصورت زیر هست:

همونطور که میبینید تقریبا همه مرورگرها از این ویژگی پشتیبانی میکنن. در بعضی از مرورگرها باید از ویژگی جایگزین دیگه ای نیز استفاده کنید تا با اینکار همه مرورگرها از اون پشتیبانی کنن. نحوه استفاده از این ویژگی بصورت زیر هست:

مقادیری که این ویژگی قبول میکنه بصورت زیر هست:

• normal : این مورد مقدار پیش فرض این ویژگی هست. در این حالت مرورگر مطابق با قوانین نرمال و عادی، شکستن در خطوط رو اعمال میکنه. در این حالت حتی اگر کلماتی طولانی وجود داشته باشند و از محدوده المنت والد (Parent) خودشون هم بیرون بزنن، مرورگر اونا رو نمیشکنه و در همون خط نگه میداره.
• break-word : کلمات و رشته هایی که بسیار طولانی هستن و از محدوده المنت والد خودشون فراتر رفته اند، در این حالت شکسته و به خط بعدی منتقل میشن.
• inherit : با این مقدار، المنت مورد نظر مقدارش رو از والدین خودش به ارث خواهد برد.

مثال و دموی زیر رو در نظر بگیرید:
همونطور که میبینید یک باکس یا Container قرار داده شده و مقداری متن درون اون قرار گرفته. در حالت اول استایل پیش فرض و نرمال اعمال میشه و میبینید که کلمه طولانی که وجود داره از محدوده باکس خارج شده و ظاهر و قالب رو به هم ریخته و باعث بی نظمی شده. زمانی که بر روی دکمه Toggle کلیک میکنید، کلاس ow با استفاده از javascript به پاراگراف اضافه میشه و این کلاس در css بصورت زیر تعریف شده:

همونطور که میبینید از ویژگی overflow-wrap استفاده کردیم و مقدار اون رو برابر با break-word قرار دادیم. زمانی که بر روی دکمه کلیک میشه، کلمه مورد نظر شکسته میشه و در محدوده مربوط به باکس قرار میگیره. بصورت زیر:

ویژگی overflow-wrap برای المنتهایی که متنشون قابل مدیریت کردن نیستن و کاربران هر چیزی رو میتونن وارد کنن، خیلی میتونه بدرد بخوره. بیشتر در بخش نظرات با چنین مواردی بر میخوریم. با اینکار اگر کاربران URL یا کلمه ای طولانی رو وارد کنن، دیگه به مشکلی بر نخواهیم خورد و قالب سایت هم منظم باقی خواهد ماند.

تاریخچه ویژگی word-wrap

ویژگی overflow-wrap نامی استاندارد برای ویژگی قدیمی word-wrap می باشد. ویژگی word-wrap در ابتدا مخصوص مرورگر Internet Explorer بود که بعدا توسط دیگر مرورگرها و بدون اینکه استاندارد شده باشه، مورد استفاده قرار گرفت. این دو ویژگی مقادیر یکسانی رو دریافت میکنن و دقیقا همانند همدیگر نیز رفتار میکنن. تنها فرقی که دارند این هست که ویژگی overflow-wrap استاندارد شده ویژگی word-wrap هست. با این حال همه مرورگرها از ویژگی word-wrap به عنوان جایگزینی برای overflow-wrap پشتیبانی میکنن و بهتره از هر دو بصورت همزمان استفاده کنید. هر دو ویژگی معتبر هستند.

شباهت و تفاوتهای overflow-wrap و word-break

این دو ویژگی بسیار شبیه به هم هستن و در اکثر موارد میتونن مشکلات مشابه رو برطرف کنن. بصورت خلاصه میتونیم تفاوت زیر رو برای این دو ویژگی بیان کنیم:

• overflow-wrap : در اکثر مواقع از این ویژگی برای جلوگیری از برهم زدن قالب و چارچوب سایت بدلیل وجود رشته های طولانی مورد استفاده قرار میگیره.
• word-break : از این ویژگی بیشتر در زبانهای غیر انگلیسی مانند چینی، کره ای و ژاپنی مورد استفاده قرار میگیره.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source