فصل 5 از 27 درس 2 از 2

Typography

Text Alignment، Truncate و Line Clamp

بخشی از آموزش جامع Tailwind CSS

محتوای درس Text Alignment، Truncate و Line Clamp

Text Alignment، Truncate و Line Clamp را در این درس به‌صورت عملی بررسی می‌کنیم. هدف این است که علاوه بر شناخت Utilityها، دلیل انتخاب آن‌ها و روش ارزیابی نتیجه را نیز بدانید.

هدف و مفهوم اصلی

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

روش پیاده‌سازی

  1. برای عنوان سطح مناسب heading انتخاب کنید.
  2. اندازه، font-weight و line-height متن فارسی را با هم تنظیم کنید.
  3. برای متن طولانی از max-width و در کارت‌ها از truncate یا line-clamp استفاده کنید.

نمونه قابل اجرا

نمونه زیر را در پروژه خود اجرا کنید، سپس هر Utility را جداگانه تغییر دهید تا اثر آن روی Layout و ظاهر مشخص شود.

index.html
<article class="w-80 rounded-xl border p-4">
  <h3 class="truncate text-lg font-bold">عنوان بسیار طولانی برای یک مقاله آموزشی Tailwind CSS</h3>
  <p class="mt-2 line-clamp-3 text-sm leading-6 text-slate-600">
    این توضیح می‌تواند طولانی باشد اما در کارت فقط چند خط از آن نمایش داده می‌شود.
  </p>
</article>

خروجی مورد انتظار

عنوان تک‌خطی و توضیح محدود به سه خط.

نکات مهم و خطاهای رایج

  • Line Clamp نباید اطلاعات ضروری یا CTA را پنهان کند.
  • Line-height کم در متن فارسی خوانایی نقطه‌ها و حروف را کاهش می‌دهد.

تمرین پیشنهادی

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

مطالعه مرجع رسمی مرتبط در مستندات Tailwind CSS