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

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

5 254 ۳۰ آذر ۹۵

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

دیدید که در جلسه قبل در مورد متنهای Inline چندخطی صحبت کردیم و تلاش کردیم که برای اونا پس زمینه قرار بدیم. چیزی که آخر به اون رسیدیم شبیه به تصویر بالا بود. میبینید که padding به همه خطوط اعمال نشده و فقط سمت چپ خط اول و سمت راست خط آخر دارای Padding هست. چیزی که ما قصد داریم اینه که سمت چپ و راست همه خطوط دارای padding بشه. ما یه راه مطمئن و قابل پیش بینی میخوایم و قصد داریم کاری کنیم که همه مشکلات اینچنینی برطرف بشن. تعدادی راه حل برای این مشکل وجود داره و در ادامه یکی یکی اونا رو بررسی میکنیم.

روش اول: استفاده از کلاسهای کاذب و ویژگی white-space

روشی که در این زمینه وجود داره استفاده از ویژگی white-space: pre-wrap; هست که باعث میشه که سطوح ناهموار سمت راست که در انتهای خطوط قرار داره نیز دارای padding بشن. پس با استفاده از این ویژگی تونستیم مشکل padding سمت راست رو برطرف کنیم. حالا برای برطرف کردن padding سمت چپ، میتونیم از کلاسهای کاذب استفاده کنیم و با استفاده از CSS positioning اون رو در جای مناسب قرار بدیم. برای اینکار بصورت زیر عمل میکنیم. کد HTML بصورت زیر میشه:

کد CSS هم بصورت زیر هست:

همونطور که دیدید موارد مورد نظر اعمال شدن. حالا اگر درون مرورگر Chrome این نمونه رو باز کنیم، خروجی بصورت زیر خواهد بود:padded line text 5

میبینید که به هدفمون رسیدیم. تنها مشکلی که این نمونه داره نحوه نمایش اون درون مرورگر Firefox هست. درون Firefox بصورت زیر هست:padded line text 6

میبینید که موقعیت کلاس کاذبی که در سمت چپ قرار گرفته درون Firefox ایراد داره. این مشکل شاید قابل حل شدن باشه ولی از اون میگذریم و سراغ روشهای بعدی میریم.

روش دوم: استفاده از box-shadow

در این روش ما با استفاده از box-shadow، سایه های افقی با spread صفر رو برای هر خط قرار میدیم و به هدفمون میرسیم. کدهای HTML زیر رو در نظر بگیرید:

کدهای CSS زیر رو هم در نظر بگیرید:

خروجی در مرورگر Chrome بصورت زیر خواهد بود:padded line text 7

میبینید که همه مواردی که مورد نظر ما هست، رعایت شده هست. این روش رو هم زمانی که درون Firefox باز میکنید به مشکل برخواهید خورد و بصورت زیر خواهد بود:padded line text 8

برای رفع این مشکل باید ویژگی box-decoration-break: clone; رو قرار بدیم. با اینکار کدهای CSS بصورت زیر خواهد شد:

خروجی هم بصورت زیر خواهد شد:padded line text 9

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

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

موفق باشید

یا علی

Source

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

دیدگاه ها 5 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    حاجی زاده(۱۵ دی ۱۳۹۵)

    نویسنده محترم در این مطلب هم اشتباه نوشتاری دارید! لطف کنید، اصلاح کنید!
    میخایم! نوشتن صحیح این چنین است: میخوایم یا می خوایم.
    با تشکر.

    • ‏‏
      وحید صالحی(۱۵ دی ۱۳۹۵)

      دوست عزیز زمانی که یه مطلب تایپ می شه ممکنه چنین مواردی ناخواسته ای اتفاق بیفته در ضمن مطلب آموزش موارد طراحی وب هست نه ادبیات که شما اینقدر حساس شدید بهتره به کیفیت آموزش توجه داشته باشید تا غلط های نوشتاری
      موفق باشید

      • ‏‏
        حاجی زاده(۱۶ دی ۱۳۹۵)

        درود آقای صالحی محترم.
        حرف شما بسیار درسته و مطلب آموزشی در مورد طراحی وب هست.
        اما من به عنوان یک کاربر سایت، وقتی مطلبی رو می خونم، با بیشترین دقت می خونم.
        آره، موافقم آقای صالحی محترم، کیفیت آموزشی نزد سون لرن هست و بس. هیچ سایتی به قدرت سون لرن نخواهد رسید.
        آقای صالحی محترم به این دلیل این نکته رو گزارش دادم، انسان هر چی بتونه باید کاری رو که انجام می ده، سعی کنه بهتر و بهتر انجام بده.
        اگه لطف کنید آموزش جدیدترین نسخه ASP.NET هم واسه آموزش ارایه کنید (پروژه محور)، خیلی عالی می شه.
        در کل حرف ندارین همگی.
        با تشکر از آقای صالحی.

    • ‏‏
      محمد اسفندیاری(۱۵ دی ۱۳۹۵)

      با تشکر از جناب صالحی عزیز
      موارد این چنینی برطرف خواهد شد.
      با تشکر از جناب حاجی زاده و چشمان تیز و غلط یاب ایشان.

      • ‏‏
        حاجی زاده(۱۶ دی ۱۳۹۵)

        درود آقای اسفندیاری.
        از ترفند های مفیدی که ارایه می کنی، متشکرم.
        آره آقای اسفندیاری، من بسیار بسیار دقیق هستم در همه کارها. برای مثال حتی اگر حاشیه سمت راست و چپ یک عنصر در صفحه یک پیکسل فرق داشته باشه، با چشمان تیز بین (عقاب مانند) خود، متوجه خواهم شد.
        همین نکته های خیلی ریز هست که در هر کاری سبب بهتر و بهتر شدن کارها خواهد شد.
        با تشکر.

  • ارسال دیدگاه

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram