文本对齐、装饰与间距
对齐文本，添加下划线或删除线，并控制字母间距和行间距。
文本对齐、装饰与间距 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
text-align
text-align 控制块容器内行内内容的水平对齐方式。
<p class="left">Left aligned text</p>
<p class="center">Center aligned text</p>
<p class="right">Right aligned text</p>
<p class="justify">Justified text that stretches to fill the full width of its container on every line except the last, spreading word spacing evenly across the line.</p>
text-align: justify
justify 通过增加单词之间的间距，将每行拉伸至填满容器宽度。在较窄的容器中，请与 hyphens: auto 一起使用，以避免出现不自然的空隙。
<p>Justified paragraph text with hyphenation enabled so that long words like internationalization can break across justified lines cleanly without leaving large gaps.</p>
text-decoration
text-decoration 为文本添加线条。它通常用于给链接添加下划线，或给已删除的内容添加删除线。
<a href="#">Underlined link</a>
<p class="strikethrough">Strikethrough text</p>
<a href="#" class="no-underline">No underline link</a>
text-decoration 长写法
text-decoration 是线条、样式、颜色和粗细的简写属性：
<a href="#">Wavy red underline link</a>
text-transform
text-transform 可以改变文本的大小写，而不会修改底层 HTML：
<p class="upper">uppercase this text</p>
<p class="lower">LOWERCASE THIS TEXT</p>
<p class="title">title case this text</p>
<p class="none">No Transform Applied</p>
text-indent
text-indent 设置块级元素首行的缩进。结合相应的内边距使用负值，可以在保证无障碍的情况下隐藏文本（图像替换）。
<p class="indent">This paragraph's first line is indented by 2em, a classic print-style paragraph convention brought to the web.</p>
<a href="#" class="logo-link">Company Logo</a>
white-space
white-space 控制如何处理源 HTML 中的空白符和换行：
normal— 合并空白符，按单词换行nowrap— 禁止换行pre— 保留空白符，不换行pre-wrap— 保留空白符，允许换行
<p class="nowrap">This text will not wrap no matter how long the line becomes.</p>
<pre>function example() {
return true;
}</pre>
letter-spacing
letter-spacing 设置字符之间的额外间距。正值会拉开字形之间的距离；负值会使它们靠得更近。请使用 em 实现按比例缩放。
<p class="spaced">spaced heading text</p>
word-spacing
word-spacing 增加单词之间的额外间距。它很少需要使用，但对于微调两端对齐的文本或展示型标题很有帮助。
<h1>Word Spaced Heading Example</h1>
text-overflow: ellipsis
使用省略号截断溢出的文本。需要同时设置 overflow: hidden 和 white-space: nowrap。
<p class="truncate">This is a very long line of text that will be truncated with an ellipsis</p>
使用 writing-mode 的竖排文本
writing-mode 旋转文本流的方向。结合 text-orientation 后，它可以实现竖排 CJK 排版或创意性的旋转标签。
<div class="label">Vertical Label Text</div>
快速检查
文本溢出时显示省略号需要哪三个属性？
回顾
text-align 控制容器内行内内容的位置。text-decoration 添加或移除线条。text-transform 改变文本大小写。text-align: nowrap + overflow: hidden + text-overflow: ellipsis 是经典的文本截断方案。
常见问题解答
「文本对齐、装饰与间距」课时是免费的吗？
是的 — 「文本对齐、装饰与间距」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「文本对齐、装饰与间距」这节课中我会学到什么？
对齐文本，添加下划线或删除线，并控制字母间距和行间距。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「文本对齐、装饰与间距」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。