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



visibility  
mode_comment   ۴

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

مثال 4 : لینک و کلمات طولانی درون محتوای پست

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

کد مربوط به این پستها بصورت زیر است:

کدهای CSS:

همونطور که میبینید تعدادی ویژگی ساده قرار دادیم تا استایل پست شکل بگیره. width اون رو 200 قرار دادیم تا حالت درون موبایل شبیه سازی بشه. با اینکار خروجی بصورت زیر است:

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

میبینید که لینک مورد نظر از باکس پست بیرون زده و ظاهر زشتی رو به وجود آورده. برای حل این مشکل از دو روش استفاده میکنیم.

روش اول : استفاده از ویژگی word-break

برای اینکار کد زیر رو به کدهای قبلی CSS اضافه میکنیم:

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

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

روش 2 : قرار دادن ... بجای متنهای بیرون زده شده

برای اینکار از ویژگی های overflow و text-overflow استفاده میکنیم. در ابتدا برای پاراگراف که لینک رو در خودش جا داده ویژگی overflow: hidden رو قرار میدیم و بعد از اون نیز ویژگی text-overflow: ellipsis رو قرار میدیم. کدهای CSS زیر رو به کدهای قبلی اولیه CSS اضافه میکنیم:

با اینکار خروجی بصورت زیر میشه:

میبینید که اون قسمتی از لینک که از پست بیرون زده شده مخفی شده و بجای اون ... قرار گرفته و به کاربر این مفهوم رو میرسونه که این لینک ادامه داره. به همین راحتی.

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

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

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

یا علی

Source

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

ببخشید rem چیه؟؟میشه یک توضیح بدین؟ کارایش چیه ؟ چی هست بعد میشه یک اموزش خوب flexbox برام بفرستین؟ تو طراحی وب سایت این اموزش نیست !! چرا؟

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

من از دوره طراحی سایت اطلاعی ندارم ولی میتونم لینکهایی رو در اختیارتون بزارم که کمکتون کنه….
برای rem:
https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
https://css-tricks.com/confused-rem-em/
این یک آموزش کامل برای flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
یک بازی رو هم قرار میدم که بصورت مرحله به مرحله و آسون flexbox رو بهتون آموزش میده:
http://flexboxfroggy.com
امیدوارم بدردتون بخورن
موفق باشید

Ali Razavi

ببخشید اقای محمد اسفندیاری اگر میشه میخام ازتون راهنمایی بخوام باید کجا مراجعه کنم ؟ میخام باهاتون حرف بزنم کاربر 3 سالتونم اکثر دوره ها رو گرفتم اگر میشه کمکم کنید

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

هیچ کدام از دوره ها با بنده نبوده…شما میتونین با استاد هر دوره در ارتباط باشید…اگر سوالی دارید همینجا میتونین بپرسید
موفق باشید

نیاز به لاگین

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