سرریز متن: بیضی مضر تلقی می شود

بازنشر افلاطون

دنبال: 0

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

با این حال، من اغلب می بینم که از آن بر روی مواردی مانند دکمه ها یا حتی برچسب ها برای زیباتر به نظر رسیدن (؟) یا هنگام تراز کردن آنها به صورت عمودی استفاده می شود. اما به محض تغییر ویوپورت یا تغییر اندازه متن، انتهای متن ناپدید می شود.

من فکر می‌کنم «...اگر در موقعیت‌های خاص استفاده شود» به آن تعلق دارد، اما مطمئناً عنوان پست وبلاگ را بدون آن بهتر می‌کند. همانطور که اریک می گوید، موارد استفاده قانونی برای کوتاه کردن متن وجود دارد. شاید فقط تعداد کمی، اما با این وجود مشروع است.

هدف نهایی جلوگیری از "از دست دادن" داده ها است که مطمئناً می تواند در CSS اتفاق بیفتد. متنی که ناخواسته ظرفی را سرریز می کند به این معنا گم می شود که به سادگی آنجا نیست. و اگر آن متن وجود نداشته باشد، کاربران آن را از دست خواهند داد، حتی اگر بهترین و خوش ساخت ترین فراخوانی باشد که تا به حال در وب منتشر شده است.

اریک اشاره می کند که هیچ راهی برای کوتاه کردن متن وجود ندارد text-overflow: ellipsis قابل رویت. وقتی رفت، رفته است (اگرچه به نظر می رسد صفحه خوان ها آن را اعلام می کنند). این عملاً داده ها را از دست داده است. شما ممکن است با آن مشکلی نداشته باشید. تا زمانی که بدانید چه اتفاقی در حال رخ دادن است و در نظر گرفته شده است، عالی است.

اما این چیزی است که اریک می گوید که باعث شد من بخواهم این را به اشتراک بگذارم:

محتوا را به تناسب طرح خود محدود نکنید، CSS خود را انعطاف پذیر کنید تا کلمات طولانی تر را به خوبی مدیریت کند.

باز هم تو قدرت می خواهید محتوا را با طراحی مطابقت دهید. اما من احتمالاً مانند اریک استدلال می کنم که طراحی باید با محتوا سازگار باشد به جای برعکس. من به سختی می‌توانم موقعیت‌هایی را که در آن متن روی صفحه بی‌اهمیت یا بدون هدف باشد، به خاطر بیاورم تا جایی که اگر در هر نقطه دلخواه تعیین شده توسط یک ویژگی CSS، بی‌هدف نباشم. شاید یک آرشیو از پست های وبلاگ که در آن هر پست گزیده ای از محتوای پست را قبل از کوتاه کردن نشان می دهد، اما این دقیقاً مورد استفاده نیست. text-overflow: ellipse.

CSS دارای ابزارهایی برای ایجاد یک طراحی انعطاف‌پذیر است که طول‌های متنی متفاوتی را در بر می‌گیرد. پس شاید اشتباه کند نوشتن CSS دفاعی… CSS که مسائل را پیش‌بینی می‌کند و می‌داند که چگونه به خوبی سناریوهای محتوای مختلف را مدیریت کند. text-overflow: ellipsis ممکن است بخشی از زرادخانه CSS شما برای آن باشد. اما ممکن است کودک را با آب حمام بیرون بیاندازد. ارزش این را دارد که بپرسید آیا از دست دادن آن داده ها ارزش هزینه کاری را دارد که آن محتوا قبل از کوتاه کردن مو انجام دهد.

در حالی که ما در مورد کوتاه کردن متن صحبت می کنیم…

ارتباط دادن در 1 اکتبر 2021