文本对齐与装饰
使用 text-left、text-center 和 text-right 对齐文本，并添加下划线、删除线以及大写等变换效果。
文本对齐与装饰 是 CoddyKit 上的免费 Tailwind CSS Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 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.
常见问题解答
「文本对齐与装饰」课时是免费的吗？
是的 — 「文本对齐与装饰」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Tailwind CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 Tailwind CSS Academy 课程共包含 4 节课。
「文本对齐与装饰」这节课中我会学到什么？
使用 text-left、text-center 和 text-right 对齐文本，并添加下划线、删除线以及大写等变换效果。 你通过在浏览器中直接运行的动手代码来练习 Tailwind CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Tailwind CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Tailwind CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「文本对齐与装饰」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Tailwind CSS Academy 课中编写并运行代码吗？
能。每节 Tailwind CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。