نکاتی کاربردی در مورد CSS (جلسه 9) : نکاتی در مورد word-wrap و overflow-wrap

- visibility ۰ mode_comment

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم. css-style

word-wrap دقیقا مثل overflow-wrap هست

ویژگی word-wrap خیلی زیاد مورد استفاده قرار نمیگیره ولی در بعضی از مواقع خیلی بدرد میخوره و میتونه کارای حیاتی رو برای ما انجام بده. یکی از مواقعی که استفاده از این ویژگی خیلی بکار میاد، زمانی هست که با کلمات خیلی طولانی یا URL ها سروکار داریم و باعث میشن که بخشی از نوشته ها از Container یا باکس مورد نظر بیرون بزنن تا باعث بهم ریختن استایل سایت ما بشه. مثال زیر رو در نظر بگیرید: همونطور که دیدید یک باکس قرار داده شده و کلمه طولانی نیز درون اون گذاشته شده. در حالت اول ویژگی word-wrap برای متن مورد نظر اعمال شده و مقدار اون برابر با break-word قرار گرفته و اینکار باعث میشه که زمانی که متن بخواد از باکس بیرون بزنه، بشکنه و به پایین و خط بعد بره. اگر بر روی دکمه Toggle Word-wrap کلیک کنید، این ویژگی غیرفعال میشه و خواهید دید که متن از باکس پدرش بیرون میزنه و استایل زشتی رو به وجود میاره. اخیرا مطلبی بعنوان استایل دهی به کلمات طولانی یا long words قرار داده شده که بصورت کامل این ویژگی ها رو مورد بررسی قرار داده.

بدلیل اینکه این ویژگی توسط Microsoft ساخته شده، این ویژگی در همه مرورگرهای Internet Explorer از جمله IE 5.5 هم پشتیبانی میشه.

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

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

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

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

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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