محاذاة النص وتزيينه
حاذِ النص باستخدام text-left وtext-center وtext-right، وأضف التسطير والشطب وتحويلات مثل الأحرف الكبيرة.
محاذاة النص وتزيينه درس مجاني في Tailwind CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Tailwind CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Tailwind CSS Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Text Alignment Basics
Position text with alignment: text-left (default), text-center, text-right, text-justify. Centered feels formal; left-aligned is easiest for long passages.
<p class="text-left">Left-aligned (default for LTR text)</p>
<p class="text-center">Center-aligned (good for headings, CTAs)</p>
<p class="text-right">Right-aligned (good for numbers, dates)</p>
<p class="text-justify">Justified text (edges align to container sides)</p>When to Use Each Alignment
Choose alignment by purpose: text-center for hero headlines, text-left for body and forms, text-right for prices and dates. Skip text-justify in dense text.
<div class="text-center mb-8">
<h1 class="text-4xl font-bold">Centered Hero Headline</h1>
<p class="text-lg text-gray-500 mt-2">Centered subtitle works for marketing.</p>
</div>
<article class="text-left">
<p class="text-base text-gray-700 leading-relaxed">
Body text always reads better left-aligned.
</p>
</article>Responsive Text Alignment
Alignment can shift by screen. A hero might be text-center on mobile and text-left on desktop — just add a breakpoint prefix to override at that size.
<!-- Centered on mobile, left-aligned on large screens -->
<div class="text-center lg:text-left">
<h1 class="text-3xl font-bold">Responsive Heading</h1>
<p class="text-gray-500">Aligns with the layout at each breakpoint.</p>
</div>Text Decoration: Underlines
Add lines with decoration: underline for links, line-through for cancelled items, and no-underline to strip the default underline from nav links.
<a href="#" class="underline text-blue-600">Standard link with underline</a>
<a href="#" class="no-underline text-gray-700 hover:underline">Nav link (underline on hover)</a>
<span class="line-through text-gray-500">$99.00</span>
<span class="text-red-600 font-bold">$59.00</span>Underline Style and Color
Style underlines finely: decoration-dotted, dashed, or wavy change the look, decoration-{color} sets its color, and decoration-2 or decoration-4 set thickness.
<p class="underline decoration-dotted decoration-indigo-500">Dotted indigo underline</p>
<p class="underline decoration-wavy decoration-red-500 decoration-2">Wavy red underline</p>
<p class="underline decoration-double decoration-4">Double thick underline</p>Underline Offset
Nudge an underline down with underline-offset-*. A small underline-offset-2 looks far more elegant than a line that touches descenders like g, p, and y.
<a href="#" class="underline underline-offset-4 decoration-indigo-600 text-indigo-700 font-medium">
A clean, offset underline
</a>Text Transform: Uppercase and Capitalize
Change letter case visually with transforms: uppercase for labels and buttons, lowercase, capitalize for titles, normal-case to reset — all without editing your HTML.
<span class="uppercase text-xs font-semibold tracking-wider text-gray-500">
section label
</span>
<span class="capitalize text-lg font-medium">
each word gets capitalized
</span>
<button class="uppercase text-sm font-bold tracking-wide">
get started
</button>Text Overflow: Truncate and Ellipsis
Keep overflowing text tidy with truncate: it hides overflow, adds an ellipsis, and stops wrapping in one class — perfect for single lines in tight spaces.
<!-- Truncate a long title in a card -->
<div class="w-48">
<p class="truncate text-gray-900 font-medium">
This is a very long title that will be cut off with an ellipsis
</p>
</div>Multi-Line Clamp
To cap multiple lines, use line-clamp-*. line-clamp-2 shows two lines then an ellipsis — ideal for card descriptions and previews of even height.
<!-- Blog card excerpt: exactly 3 lines -->
<p class="line-clamp-3 text-gray-600 text-sm">
This is a blog post excerpt that could be much longer.
It will be clamped to exactly three lines no matter how
much text is here. The rest is hidden with an ellipsis.
This fourth line will never be visible.
</p>White Space Control
The whitespace-* utilities decide how spaces behave: whitespace-nowrap stops wrapping for labels, while whitespace-pre keeps spaces and newlines for code.
<!-- Keep a button label on one line -->
<button class="whitespace-nowrap px-4 py-2 bg-indigo-600 text-white rounded">
Schedule a Demo
</button>
<!-- Display code with preserved formatting -->
<pre class="whitespace-pre font-mono text-sm bg-gray-100 p-4 rounded">
const x = 1;
const y = 2;
</pre>Practical: Article Metadata Row
An article metadata row blends it all: avatar and author, a muted date, a hover underline on the link, and an uppercase tracking-wider reading-time badge.
<div class="flex items-center gap-3 text-sm text-gray-500">
<img src="avatar.jpg" class="w-8 h-8 rounded-full" alt="" />
<a href="#" class="font-medium text-gray-900 hover:underline">Jane Doe</a>
<span>·</span>
<time class="">June 20, 2024</time>
<span>·</span>
<span class="uppercase tracking-wide font-semibold text-xs text-indigo-600">
5 min read
</span>
</div>Quick Check
Quick check! See how alignment and decoration stuck. ✍️
Lesson Recap
Well done! text-left/center/right align, underline and line-through decorate, and uppercase plus line-clamp shape text. Next up: the color palette and backgrounds.
تعلم HTML مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «محاذاة النص وتزيينه» مجاني؟
نعم — نص درس «محاذاة النص وتزيينه» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Tailwind CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Tailwind CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «محاذاة النص وتزيينه»؟
حاذِ النص باستخدام text-left وtext-center وtext-right، وأضف التسطير والشطب وتحويلات مثل الأحرف الكبيرة. تتمرن على Tailwind CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Tailwind CSS Academy؟
لا تُشترط خبرة سابقة. Tailwind CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «محاذاة النص وتزيينه»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Tailwind CSS Academy هذا؟
نعم. كل درس في Tailwind CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- حجم الخط وسمكه
- لون النص وشفافيته
- ارتفاع السطر وتباعد الأحرف
- محاذاة النص وتزيينه