line-clamp-*

قصّ النص متعدّد الأسطر line-clamp-*

يقصّ فقرة نصّية عند عدد أسطر محدّد ويضيف نقاط حذف تلقائية — بديل نظيف عن truncate للنص متعدّد الأسطر.

truncate (من درس الطباعة) يقصّ سطرًا واحدًا فقط. line-clamp يذهب أبعد: يعرض عددًا محدّدًا من الأسطر (line-clamp-3 مثلًا) ثم يقصّ الباقي مضيفًا … تلقائيًّا، بغضّ النظر عن طول النص الفعلي أو حجم الشاشة. مثالية لملخّصات المقالات وبطاقات المنتجات حيث تحتاج كل البطاقات نفس الارتفاع مهما اختلف طول النص الأصلي.

تقنيًّا تعتمد على -webkit-line-clamp، وهي خاصّية مدعومة على نطاق واسع في المتصفحات الحديثة رغم بادئتها.

الصياغة

class="line-clamp-3"   /* يقصّ بعد 3 أسطر */
class="line-clamp-none" /* إلغاء القصّ */

⚡ جرّب بنفسك

عدّل الكود واضغط «تحديث» لترى النتيجة فورًا — التجربة أفضل معلّم.

🎨 محرّر HTML/CSS

<script src="https://cdn.tailwindcss.com"></script>
<p class="line-clamp-3 max-w-sm p-4 text-gray-700">
  هذا نصّ طويل جدًّا يتكرّر ويطول ويطول حتى يتجاوز مساحته المخصّصة، فيقوم Tailwind بقصّه تلقائيًّا بعد ثلاثة أسطر بالضبط مع ظهور نقاط حذف واضحة في نهاية السطر الثالث لتبقى البطاقة أنيقة الشكل ومتّسقة الارتفاع مع بقيّة البطاقات المجاورة لها في نفس الشبكة.
</p>

النتيجة المباشرة:

أهم القيم

القيمة	الوظيفة
line-clamp-1..6	قصّ بعد عدد أسطر محدّد (1 إلى 6)
line-clamp-none	إلغاء القصّ — يظهر النص كاملًا
line-clamp-[n]	عدد أسطر مخصّص خارج القيم الجاهزة

💡 نصائح عملية

استخدمه مع md:line-clamp-none لإظهار النص كاملًا على الشاشات الكبيرة فقط وقصّه على الجوّال
يعمل تلقائيًّا مع الاتجاه RTL — لا حاجة لإعداد إضافي في المواقع العربية

⚠️ أخطاء شائعة

استخدام truncate (سطر واحد) حيث المطلوب فقرة كاملة بعدّة أسطر — النتيجة قصّ مبكر جدًّا
نسيان max-w-* على العنصر — بلا عرض محدود لا يوجد سبب حقيقي للقصّ في أغلب الحالات

🎓 تريد فهم الصورة الكاملة خطوة بخطوة؟ ابدأ من مسار TAILWIND الكامل بالعربي.

📚 للتعمق التقني الكامل بالإنجليزية: MDN Web Docs