CSS：权威指南，第 5 版

第 15 章 文本属性 文本属性

本作品已使用人工智能进行翻译。欢迎您提供反馈和意见：[e-mail]

由于文本非常重要，许多 CSS 属性都会以这样或那样的方式影响它。但我们不是已经在第 14 章中介绍过了吗？ 不完全是：我们只介绍了字体--字体的导入和使用。 文字样式则不同。

那么，文字和字体之间有什么区别呢？最简单地说，文字是内容，而字体是用来显示内容的。字体提供字母的形状。文本是围绕这些形状的样式。使用文本属性，你可以影响文本相对于行的其他部分的位置、上标、下划线以及更改大小写。还可以影响文本装饰的大小、颜色和位置。

缩进和内联对齐

让我们先来讨论一下如何影响行内文本的内联定位。将这些基本操作视为创建时事通讯或撰写报告的相同步骤。

最初，CSS 是基于水平和垂直的概念。为了更好地支持所有语言和书写方向，CSS 现在使用块方向和内联方向这两个术语。如果您的主要语言来自西方，那么您会习惯于从上到下的块方向和从左到右的内联方向。

块方向是，在当前书写模式下，块元素默认的放置方向。 例如，在英语中，块方向是从上到下，或垂直的，因为一个段落（或其他文本元素）放在前一个段落的下面。有些语言的文本是竖排的，如蒙古文。当文本垂直时，块方向为水平。

内联方向是指，内联元素在块中的书写方向。 还是以英语为例，内联方向是从左到右，即水平方向。 在阿拉伯语和希伯来语等语言中，内联方向是从右到左。重复上一段的例子，蒙古语的内联方向是从上到下。

让我们重新考虑一下英语。 在屏幕上显示的一页普通英文文本，具有垂直的块方向（从上到下）和水平的内联方向（从左到右）。 但如果使用 CSS 变换功能将页面逆时针旋转 90 度，页面的分块方向就会突然变成水平方向，而内联方向则变成垂直方向。 (而且是从下到上）。

提示

你仍然可以在网络上找到很多以英语为中心的博客文章和其他 CSS 相关文档，在谈到书写方向时使用垂直和水平这两个术语。 在使用时，请根据需要将它们翻译成block和inline。

缩进文本

我们阅读的大多数 纸质西方语言书籍的文本段落格式都是首行缩进，段落之间没有空行。 如果您想重新创建这种格式，CSS 提供了属性text-indent 。

文本缩进

价值观	[ <length> | <percentage> ] && hanging && each-line
初始值	0
适用于	区块级要素
百分比	参照包含区块的宽度
计算值	对于百分比值，按照规定；对于长度值，绝对长度
继承	是
动画	是
说明	hanging 和 在 2022 年年中仍处于试验阶段each-line

使用text-indent ，任何元素的第一行都可以缩进给定的长度，即使该长度为负数。该属性的常见用途是缩进段落的第一行：

p {text-indent: 3em;}

如图 15-1 所示，该规则将使任何段落的第一行缩进 3 ems。

图 15-1. 文本缩进

一般来说，您可以将text-indent 应用于任何生成块框的元素，缩进将沿内联方向进行。但不能应用于内联元素或替换元素（如图像）。不过，如果在块级元素的第一行中有图像，它将与该行中的其他文本一起移位。

备注

如果要 "缩进 "内联元素的第一行，可以使用左填充或 ...