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

ساخت وبلاگ
0 5 ۱۸ مرداد ۹۶

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

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

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

کدهای CSS:

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

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

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

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

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

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

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

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

یا علی

Source

سون لرن • آموزش...
ما را در سایت سون لرن • آموزش دنبال می کنید

برچسب : نویسنده : استخدام کار 7learn بازدید : 276 تاريخ : پنجشنبه 19 مرداد 1396 ساعت: 23:29

خبرنامه