ترفندهای حرفه ای و پیشرفته Front End (جلسه 14) : استایل دهی کلمات طولانی یا long words - قسمت 2

- visibility ٠ mode_comment

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.long-word-hyphens

در جلسه قبل توضیحاتی در مورد استایل دهی به Long Words خدمتتون دادیم و اینجا میخایم توضیحاتو ادامه بدیم.

استفاده از ویژگی word-break

همونطور که دیدید پشتیبانی مرورگرها برای خط تیره یا hyphen خوب نبود و همه اونو نمایش نمیدادن. حالا میخایم در مورد ویژگی work-break که درون CSS وجود داره صحبت کنیم و با استفاده از اون کلماتی که طولانی هستن رو بشکونیم و در خطهای بیشتری قرار بدیم. برای اینکار بصورت زیر عمل میکنیم:

همونطور که دیدید یک کلاس بنام word-break به h1 دادیم و درون css به اون استایل دهی کردیم. دیدید که از ویژگی word-break استفاده کردیم و مقادیر break-all و break-word رو برای اون در نظر گرفتیم. خروجی در مرورگر بصورت زیر خواهد شد:long-word-word-wrap

همونطور که دیدید کلمه در این حالت از div بیرون نزده و بین خطوط بیشتری شکسته شده. مرورگرها از این ویژگی ها پشتیبانی خیلی خوبی دارن ولی مرورگر Opera mini از این ویژگی پشتیبانی نمیکنه. استفاده از این ویژگی به بصورت همزمان با Hyphen در بعضی از مرورگرها مشکلاتی رو بوجود میاره.

استفاده از ویژگی overflow-wrap

ویژگی دیگه ای که در این زمینه میتونین از اون کمک بگیرین ویژگی overflow-wrap یا word-wrap هست. با استفاده از این ویژگی به مرورگر میگیم که به خط جدید بره. کد زیر رو در نظر بگیرید:

همونطور که دیدید ویژگی های word-wrap و overflow-wrap رو مشخص کردیم و اونا رو برابر با مقدار break-word قرار دادیم. خروجی در مرورگر بصورت زیر هست:long-word-word-wrap

این مورد در همه مرورگرها پشتیبانی میشه و میتونین با خیال راحت ازش استفاده کنید.

استفاده از ... یا Ellipsis

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

همونطور که دیدید کلاس ellipsis رو اضافه کردیم. در ابتدا گفتیم که هر چیزی بیرون از h1 قرار گرفت، hidden یا مخفی بشه. همچنین با استفاده از ویژگی text-overflow مشخص کردیم که هر چیزی بیرون از محدوده قرار گرفت، بجاش ... یا Ellipsis قرار بگیره. ویژگی text-overflow تقریبا در همه مرورگرها پشتیبانی میشه.

همه موارد بالا در مرورگرهای مختلفی تست شدن و نتایج اون در اینجا قرار گرفته و میتونین اونا رو ببینید. اگر + بود یعنی پشتیبانی میشه و اگر - بود یعنی پشتیبانی نمیشه.

راه حل نهایی

کد زیر رو در نظر بگیرید:

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

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

موفق باشید

یا علی

Source

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

نیاز به لاگین

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