مدیریت محتوای طولانی و غیرمنتظره توسط CSS - قسمت 5



visibility  
mode_comment   ۰

همونطور که اطلاع دارید در جلسه قبل یک مثال رو با هم بررسی کردیم و مشکل لینک و کلمات طولانی درون محتوای پست رو با استفاده از ویژگی های word-break و text-overflow برطرف کردیم. در این جلسه میخوایم مثال دیگه ای رو با هم بررسی کنیم و روش حل اون رو یاد بگیریم.

مثال 4 : برچسب طولانی مقالات

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

کدهای CSS:

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

متخصص وردپرس
قالب ها و پلاگین های حرفه ای وردپرس رو خودت بنویس! بازار طراحی قالب و پلاگین نویسی وردپرس به شدت داغه و اگر بلد باشید با برنامه نویسی اختصاصی، قالب ها و پلاگین های دلخواه بنویسید تو مارکت های مطرح دنیا و یا از طریق فریلنسری می تونید به درآمد بالا برید. دوره متخصص وردپرس سون لرن رو حتما ببینید: متخصص وردپرس arrow_back

میبینید که همه موارد خوب هست و هیچ مشکلی وجود ندارد. اما اگر متن مورد نظر رو کمی طولانی تر کنیم، خروجی بصورت زیر میشه:

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

میبینید که متن مورد نظر کلا در عرض قرار گرفته. حالا میتونیم عرض رو ثابت در نظر بگیریم و ارتفاع رو auto کنیم. با اینکار خروجی بصورت زیر میشه:

میبینید که در این حالت نیز رابط کاربری به خوبی نمایش داده میشه. بهترین کار اینه که در این مواقع هم از min-width استفاده کنید و هم height رو auto قرار بدین تا هم عرض و هم ارتفاع متناسب با متن و محتوایی که درونشون قرار داده شده، تغییر پیدا بکنن و داینامیک تر باشند.

در جلسه بعد با ادامه آموزش در خدمتتون هستیم و مثالها و مشکلات دیگه رو بررسی میکنیم.

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

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

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