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

بله، ما در وب‌دنج این درد را به خوبی می‌فهمیم! وقتی عنوان یک محصول یک خط است و عنوان محصول کناری سه خط، دکمه‌های «افزودن به سبد خرید» دیگر در یک راستا قرار نمی‌گیرند. این بهم‌ریختگی ظاهری، نه تنها ظاهر سایت شما را آماتور جلوه می‌دهد، بلکه تاثیر مستقیمی روی کاهش اعتماد کاربر و در نتیجه افت فروش شما دارد. اما نگران نباشید؛ امروز قرار است با یک ترفند فوق‌العاده ساده اما قدرتمند، این کابوس را برای همیشه تمام کنیم. با ما همراه باشید تا یاد بگیریم چگونه عنوان هر صفحه یا محصولی را به زیبایی در یک خط خلاصه کنیم و در انتهای آن سه نقطه (…) قرار دهیم.

چرا عناوین طولانی، قاتل خاموش رابط کاربری (UI) شما هستند؟

در دنیای طراحی سایت و رابط کاربری، تقارن و نظم حرف اول را می‌زند. چشم کاربر به صورت ناخودآگاه به دنبال الگوهای منظم می‌گردد. زمانی که در صفحه فروشگاه (Shop Page) یا حتی صفحه اصلی، باکس محصولات شما ارتفاع‌های متفاوتی داشته باشند، ذهن کاربر خسته می‌شود. از طرفی، در طراحی واکنش‌گرا (ریسپانسیو) برای موبایل، عناوین طولانی می‌توانند بخش عظیمی از صفحه نمایشگر گوشی را اشغال کنند و کاربر را مجبور به اسکرول‌های افقی و خسته‌کننده نمایند.

راه حل چیست؟ آیا باید از نویسندگان سایت بخواهیم عناوین را کوتاه بنویسند؟ قطعا خیر! عناوین طولانی برای سئو (SEO) و هدف‌گیری کلمات کلیدی دم‌دراز (Long-tail Keywords) بسیار حیاتی هستند. راه حل مهندسی و اصولی این است که عنوان در کدهای سایت (HTML) به صورت کامل وجود داشته باشد تا گوگل آن را بخواند، اما در ظاهر سایت (توسط CSS) برای کاربر کوتاه و منظم نمایش داده شود.

سه تفنگدار CSS: کدی که قالب شما را نجات می‌دهد

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

این سه خط کد جادویی به شرح زیر است:

/* 
 * کد محدود کردن متن در یک خط
 * منبع: وب‌دنج (WebDenj.ir) 
 */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

کالبدشکافی کد: این سه خط دقیقا چه کار می‌کنند؟

ما در وب‌دنج دوست نداریم شما فقط کدها را کپی کنید؛ ما می‌خواهیم شما منطق پشت آن‌ها را درک کنید تا به یک متخصص واقعی تبدیل شوید. بیایید این سه خط را زیر ذره‌بین ببریم:

خط اول (white-space: nowrap): این کد به مرورگر دستور می‌دهد که به هیچ وجه متن را نشکند و به خط بعدی نبرد. یعنی حتی اگر متن ۱۰۰ کلمه هم باشد، باید همه آن‌ها در همان خط اول پشت سر هم ردیف شوند.

خط دوم (overflow: hidden): حالا که متن در یک خط طولانی قرار گرفت، قطعا از کادر و باکسی که برای آن در نظر گرفته‌ایم بیرون می‌زند. این کد به مرورگر می‌گوید: «هر قسمتی از متن که از مرز تعیین شده (باکس محصول) بیرون زد را مخفی کن و نمایش نده!»

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

چگونه این کد را در المنتور پرو و جت انجین اجرا کنیم؟

اگر از صفحه‌سازهای حرفه‌ای مثل المنتور پرو استفاده می‌کنید، کار شما به شدت آسان است. افزونه‌های قدرتمندی مانند المنتور پرو و جت انجین به شما اجازه می‌دهند بدون نیاز به دستکاری فایل‌های اصلی قالب، کدهای CSS سفارشی خود را مستقیماً به هر المانی که دوست دارید اختصاص دهید.

مرحله اول: کافیست وارد ویرایشگر المنتور شوید و روی المان عنوان محصول (Product Title) یا هر متنی که می‌خواهید کوتاه شود کلیک کنید.
مرحله دوم: به تب پیشرفته (Advanced) بروید و بخش CSS سفارشی (Custom CSS) را باز کنید.
مرحله سوم: کد زیر را در آنجا قرار دهید (توجه کنید که کلمه selector در المنتور به همان المانی که انتخاب کرده‌اید اشاره می‌کند):

/* 
 * کد محدود کردن متن در یک خط
 * منبع: وب‌دنج (WebDenj.ir) 
 */
selector {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

یک پیشنهاد دوستانه و حرفه‌ای: برای اجرای این قابلیت‌های داینامیک و کنترل کامل روی ظاهر فروشگاه، داشتن ابزارهای اورجینال یک ضرورت است. شما دوستان و طراحان عزیز می‌توانید جدیدترین و امن‌ترین نسخه افزونه المنتور پرو (Elementor Pro) و همچنین ابزار بی‌رقیب ساخت شبکه‌های داینامیک یعنی افزونه جت انجین (JetEngine) را به صورت کاملاً اورجینال و بدون دستکاری کدهای مخرب، از مخزن امن وب‌دنج دانلود کنید. با ترکیب این دو افزونه، شما می‌توانید پیچیده‌ترین فروشگاه‌های اینترنتی را با چند کلیک و بدون نیاز به دانش برنامه‌نویسی پیشرفته خلق کنید.

سوالات متداول (FAQ)

آیا مخفی کردن بخشی از متن با CSS به سئوی سایت ضربه می‌زند؟
خیر، به هیچ وجه! ربات‌های گوگل کدهای HTML سایت شما را می‌خوانند و تمام متن عنوان در آنجا حضور دارد. این کد فقط ظاهر قضیه را برای کاربر زیباتر می‌کند و هیچ تاثیر منفی روی سئو یا رتبه‌بندی شما در نتایج جستجو نخواهد داشت.

آیا می‌توانم به جای یک خط، متن را در دو یا سه خط محدود کنم؟
بله! اگر می‌خواهید متن شما مثلاً بعد از ۲ خط سه نقطه بگیرد، باید از کدهای مربوط به Line-clamp استفاده کنید که ساختار متفاوتی دارد (شامل کدهای webkit-box می‌شود). اما برای محدود کردن به صورت تک‌خطی، همین سه خط کدی که در این مقاله معرفی کردیم بهترین، استانداردترین و سبک‌ترین انتخاب ممکن است.

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