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

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

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

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

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

کدهای CSS:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

یا علی

Source