آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

4 277 ۲۹ آذر ۹۵

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

این ترفندی که در اینجا در مورد اون بحث میشه شاید خیلی کاربرد نداشته باشه ولی گاهی اوقات به اون نیازمند خواهید شد. همچنین مواقعی درون بعضی جاها گیر خواهید کرد که این ترفندها میتونه براتون راهگشا باشه. چیزی که الان قصد داریم در مورد اون صحبت کنیم متنهای Inline هستن که قسمت سمت راستشون ناصاف و ناهموار هست. مثلا زمانی رو در نظر بگیرید که یک متن درون صفحه سایت قرار داره و در آخر هر خط بدلیل اینکه دیگه جا نیس، کلمه ها به خط بعد میرن و آخر خطهای متن مورد نظر ناصاف میشه. حالا در این شرایط شما قصد دارید که یک Background رو بعنوان پس زمینه این متن قرار بدین که:

  1. این پس زمینه بر طبق ناهمواری ها عمل کنه و همه اونا رو بپوشونه
  2. سمت راست و چپ هر خطی که Padding داره نیز تحت پوشش قرار بده

فرض کنید که یک کد HTML بصورت زیر رو داریم:

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

حالا اگر درون مرورگر این کدها رو اجرا کنیم بصورت زیر خواهند شد:padded line text

حالا فرض کنید برای المنت h1 که کلاس title رو داره یک background قرار بدیم. کد CSS بصورت زیر خواهد بود:

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

میبینید که پس زمینه مستطیل شکل ایجاد شده و اون چیزی که ما در بالا قصد رسیدن بهش رو داشتیم اتفاق نیافتاده. قصد ما این بود که پس زمینه هر جا که متن بود قرار بگیره و بقیه جاها خیر و اگر متن هم padding داشت، این padding برای راست و چپ تمامی خطوط اعمال بشه. در مثال بالا چون ما پس زمینه رو به h1 اعمال کردیم و h1 هم یک المنت Block Level هست و بصورت مستطیل شکل در میاد. خب حالا بیاید بجای اینکه پس زمینه رو برای h1 قرار بدیم، اون رو به span که یک المنت Inline هست، اعمال کنیم. کدهای CSS بصورت زیر میشه:

اگر خروجی رو در مرورگر ببینید، بصورت زیر خواهد بود:padded line text 3

همونطور که میبینید مشکلات تا یجایی برطرف شده ولی هنوزم اون چیزی نیست که ما میخواستیم. میبینید که هر جایی که متن قرار داره، یک پس زمینه هم برای اون اعمال شده. حالا برای اینکه این فاصله های خالی رو پر کنیم، میتونیم از padding استفاده کنیم. کدهای CSS بصورت زیر خواهد شد:

خروجی در مرورگر:padded line text 4

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

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

موفق باشید

یا علی

Source

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

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

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

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

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

      برداشت معنایی اشتباهی که شما نسبت به میخاستیم دارید رو میشه برای ما هم بیان کنید؟

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

        درود آقای اسفندیاری.
        جوری که شما نوشتید، معنی برخاستن از مطلب برداشت می شه!
        ممکنه یکی از کاربرها به اشتباه همین کلمه رو در جایی به کار ببره! و این خوب نیست.
        از ترفند های مفیدی که قرار می دید، متشکرم.
        با این نیت این نکته رو گزارش دادم که شما از موضوع اطلاع داشته و به اشتباه این چنین نوشتید. منظور دیگری هرگز نداشتم.
        با تشکر.

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

          بعضی وقتا برای تایپ سریع این اتفاق میوفته و دیگه تکرار نمیشه
          ممنون از تذکری که دادین
          موفق باشید

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram