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

- visibility ۵ mode_comment

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

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

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

وحید صالحی

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

حاجی زاده

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

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

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

حاجی زاده

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

نیاز به لاگین

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