bundles
  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

ترفندهای حرفه ای و پیشرفته Front End (جلسه 19) : Padded text یا padding دادن به متون چند خطی - قسمت 3

0 356 ۱۱ دی ۹۵

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

همونطور که در جلسات قبل مشاهده فرمودید ما دو روش برای هر مشکل مورد نظر رو بیان کردیم و در این مطلب میخایم اونا رو ادامه بدیم.

روش سوم: استفاده از Javascript و Unicode

در ابتدا بگیم که بهتره از این روش استفاده نکنید. این روش اینجا بیان میشه چون روش بسیار جالب و حرفه ای هست و خیلی سر راست عمل میکنه. ایده ای که در این روش استفاده میشه اینه که با استفاده از Javascript کل متن مورد پیمایش قرار داده بشه و همه کاراکترهای فضای خالی یا Space رو با کاراکتر یونیکد \u205f تعویض یا جایگزین کنیم. این کاراکتر همون فاصله ریاضی متوسط یا MEDIUM MATHEMATICAL SPACE هست. این روش با استفاده از padding در سمت راست هم بهتر جواب میده. برای سمت چپ هم میتونین از ویژگی border-left برای المنت block-level پدر استفاده کنید. نمونه زیر رو مشاهده کنید:

اینکه با استفاده از line-height کاری کنید که فاصله بین خطوط از بین نره یک مقدار سخت هست ولی میتونین با کم و زیاد کردن اون درستش کنید. پس دیدید که با استفاده از این کارکتر یونیکد میتونیم به راحتی مشکل سمت راست خطوط رو درست کنیم.

روش چهارم: استفاده از 3 المنت

شما میتونین بدون هیچ ترفند خاص مربوط به CSS یا JS و با استفاده از 3 المنت HTML این کار رو انجام بدین. شما به یک المنت block level برای Parent نیاز دارید تا با استفاده از اون border-left رو درست کنید. درون اون یک المنت inline قرار میدیم تا با استفاده از اون پس زمینه و padding رو به وجود بیاریم. مجددا یک المنت inline دیگه درون اون قرار میدیم و با استفاده از خاصیت position اون رو جابجا کرده و به سمت چپ میاریم. دموی زیر رو مشاهده کنید:

اگر این نمونه رو درون Firefox مشاهده کنید مشکلاتی در مورد line-height خواهید دید. برای این مشکل راه حلی رو پیدا نکردم.

روش پنجم: استفاده از box-decoration-break

در اینجا میخایم از یک ویژگی جدید CSS استفاده کنیم. با استفاده از این روش میتونین نیاز به استفاده از سه المنت رو از بین ببرید. با استفاده از این ویژگی میتونیم کار رو با یک المنت هم انجام بدیم ولی برای فاصله دهی بهتر المنت inline رو درون یک المنت block level قرار میدیم. دموی زیر رو مشاهده کنید:

این مورد درون Firefox 32 به بالا کار میکنه و برای اینکه درون Chrome و Safari کار کنه باید پیشوند webkit رو قرار بدین.

دیدید که با استفاده از این 5 روش تونستیم این مشکل رو برطرف کنیم.

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

موفق باشید

یا علی

Source

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

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

ارسال دیدگاه

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

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

ورود به سایت

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

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

عبارت :
7LearnTelegram