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

- visibility ۴ mode_comment

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

comment دیدگاه کاربران
حاجی زاده

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

محمد اسفندیاری

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

حاجی زاده

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

محمد اسفندیاری

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

نیاز به لاگین

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