یک خطی کردن عنوان پست ، محصول در المنتور با CSS

5/5 - (1 امتیاز)

یک‌خطی کردن عنوان‌ها در المنتور

خیلی وقت ها برای یک خطی کردن عنوان‌های پست یا محصولات در طراحی قالب المنتور به مشکل میخوریم و دیزاین صفحه با چند خطی شدن عناوین به هم میخورد ، این پست از ایده پردازش به کدی آماده کرده ایم که میتوانید با آن مشکل خود را حل کنید ، کافی است کد زیر را در css سفارشی یا custom css در تب پیشرفته عنوان خود قرار دهید.

مشکل: چرا عنوان‌ها چندخطی می‌شوند و چرا این بد است؟

در قالب‌های المنتور/وردپرس وقتی عنوان‌های پست یا محصولات طولانی باشند، چند خط می‌شوند و راست‌بسته‌بندی/چیدمان کارت‌ها یا ستون‌ها بهم می‌خورد. برای حفظ یک‌دستی طراحی، معمولاً می‌خواهیم عنوان فقط در یک خط نمایش داده شود و اگر طولانی بود، با سه‌نقطه (ellipsis) کوتاه شود.

در کد زیر ما تگ html را روی h3 قرار داده ایم.

selector h3 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

1

2

3

4

5

6

7

selector h3 {

display: -webkit-box;

-webkit-line-clamp: 1;

-webkit-box-orient: vertical;

overflow: hidden;

margin: 0;

}

توضیح خط به خط

`selector h3 { ... }`

در محیط المنتور وقتی از بخش Custom CSS استفاده می‌کنید، selector به المنت کنونی اشاره می‌کند. مثال: اگر در تنظیمات ویجت عنوان (Heading) این CSS را بگذارید، فقط همان عنوان را هدف می‌گیرد.
اگر می‌خواهید در فایل CSS قالب یا global استفاده کنید، به‌صورت مثال از کلاس‌های واقعی استفاده کنید:
.elementor-widget-heading .elementor-heading-title یا .product-card h3 .
توجه داشته باشید اگر تگ عنوان شما h1 یا h2 و… است باید h3 را که ما برای نمونه آورده‌ایم اصلاح کنید.

`display: -webkit-box;`

این مقدار نمایش (display) برای فعال‌سازی یک مدل جعبه‌ای قدیمی WebKit استفاده می‌شود که -webkit-line-clamp روی آن کار می‌کند.
به عبارت ساده: این خط می‌گوید عنصر را به‌صورت یک جعبه چندخطی وب‌کیت قرار بده تا بتوانیم تعداد خطوط را محدود کنیم.

`-webkit-line-clamp: 1;`

مهم‌ترین خط: تعیین می‌کند حداکثر چند خط نمایش داده شود — در اینجا 1 یعنی فقط یک خط نمایش.
این خاصیت غیررسمی / vendor-prefixed است و در عمل نیازمند display: -webkit-box و -webkit-box-orient است تا کار کند.
با مقدار 2 یا 3 می‌توانید محدودیت را به 2 یا 3 خط تغییر دهید (برای مثال عناوین دوخطی).

`-webkit-box-orient: vertical;`

جهت‌گیری جعبهٔ وب‌کیت را تعیین می‌کند. برای محدود کردن خطوط باید vertical باشد (عمودی).
بدون این خط، -webkit-line-clamp معمولاً کار نخواهد کرد.

`overflow: hidden;`

مخفی کردن محتواهایی که از محدودهٔ جعبه فراتر می‌روند. برای اینکه بخش اضافی متن دیده نشود و سه‌نقطهٔ ظاهری عملی شود، لازم است.
بدون overflow: hidden محتوای اضافی همچنان دیده می‌شود.

`margin: 0;`

حذف حاشیهٔ پیش‌فرض عنصر h3 تا ارتفاع و چینش کارت/ستون دقیق‌تر بشود.
معمولاً برای کنترل دقیق طراحی بهتر است margin را تنظیم کنید (مثلاً margin: 0 0 .25rem 0).

نوشته‌های تازه

دیدگاهتان را بنویسید لغو پاسخ

ایده پردازش

پشتیبانی