کنترل و مهار اضافه ی متن و یا تصویر در CSS

25 امتیاز

Loading…

بسم الله الرحمن الرحیم

در طراحی سمت کاربر بهتر است که مواردی را پیش بینی کرده و راه حلی برای آن داشته باشیم،به عنوان مثال اگر عکسی در کد قرار داده اید و همه چیز ظاهرا در مرورگر خوب است،سعی کنید برای آزمایش یک عکس با سایز خیلی بزرگتر را هم استفاده کنید.شاید شاهد یک ناسازگاری باشید.که با یک خاصیت max-with و یا overflow و امثالهم بتوان آن را مهار کرد.

وقتی تصویر از کادر اصلی بیرون می زند

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

.tasvir{
 max-with:100%;
}

با این کار اجازه به هم ریختگی تصاویر در طرحتان را از تصاویر ناسازگار گرفته اید.

بدیهی ست که دادن خاصیت سرریز در این قسمت نامعقول است،چرا که باعث عدم نمایش بخشی از تصویر برای کاربر خواهد شد و این جالب نیست.

وقتی متن های اضافی دردسرساز می شوند

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

برای این مشکل شما می توانید دست به دامان CSS شوید،به این صورت که اجازه بیرون زدن از حد خود را به او ندهید.

با کد زیر این مشکل را می توانید حل کنید،با این کار اضافه متن شما قیچی شده و سه نقطه جای آن را می گیرد:

.matn{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

آیا این مسائل را می توان در سمت سرور رفع نمود؟

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