illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 112 ۲۲ آبان ۹۵

در این جلسه با یه ترفند حرفه ای و پیشرفته دیگه در خدمتتون هستیم و امیدواریم که بتونید از اون استفاده کنید.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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram