9.1 属性 text-indent
在CSS中，段落属性在管理文本格式化中扮演着关键角色，提升阅读便利性和美观性。当中，text-indent和text-align-last是个重要工具，用于调整段落中首行缩进和最后一行文本的对齐。
属性text-indent负责管理块元素内文本首行的缩进。常用于创建段落开头的缩进，从而改善文本的可读性和结构。
值：
- 绝对值: 使用固定单位，如像素 (
px), 点 (pt), 厘米 (cm) 等。例如，text-indent: 20px; - 百分比值: 块容器宽度百分比的值。例如，
text-indent: 5%; - 负值: 缩进可以是负值，会将文本向左对齐到容器外。例如，
text-indent: -20px;
使用示例：
CSS
.indent-20px {
text-indent: 20px;
}
.indent-5percent {
text-indent: 5%;
}
.indent-negative {
text-indent: -20px;
}
HTML
<body>
<p class="indent-20px">这是一个首行缩进20像素的段落。</p>
<p class="indent-5percent">这是一个首行缩进5%块宽度的段落。</p>
<p class="indent-negative">这是一个首行负缩进20像素的段落。</p>
</body>
9.2 属性 text-align-last
属性text-align-last管理块元素内文本最后一行的对齐。它在段落中实现对齐一致性时很有用，尤其是在文本两端对齐(justify)时。
值：
auto: 最后一行按普通文本对齐（默认值）left: 最后一行左对齐right: 最后一行右对齐center: 最后一行居中justify: 最后一行两端对齐，如同段落的其余行
使用示例：
CSS
.justify-left {
text-align: justify;
text-align-last: left;
}
.justify-right {
text-align: justify;
text-align-last: right;
}
.justify-center {
text-align: justify;
text-align-last: center;
}
.justify-justify {
text-align: justify;
text-align-last: justify;
}
HTML
<body>
<p class="justify-left">这是一个文本两端对齐且最后一行左对齐的段落。</p>
<p class="justify-right">这是一个文本两端对齐且最后一行右对齐的段落。</p>
<p class="justify-center">这是一个文本两端对齐且最后一行居中的段落。</p>
<p class="justify-justify">这是一个文本和最后一行都两端对齐的段落。</p>
</body>
9.3 属性的联合使用
属性text-indent和text-align-last可以结合使用来创建更复杂的段落格式，提升文本的可读性和视觉结构。
HTML和CSS示例：
CSS
.styled-paragraph {
text-indent: 30px;
text-align: justify;
text-align-last: right;
width: 300px;
border: 1px solid #000;
padding: 10px;
}
HTML
<body>
<p class="styled-paragraph">
这个段落有30像素的首行缩进，文本两端对齐，最后一行右对齐。
这展示了text-indent和text-align-last属性结合使用以达到所需格式效果。
</p>
</body>
代码解释：
text-indent: 30px;: 设置文本首行缩进为30像素text-align: justify;: 文本按容器宽度两端对齐text-align-last: right;: 文本最后一行右对齐width: 300px;: 设置文本容器的宽度border: 1px solid #000;: 给文本容器添加边框padding: 10px;: 设置容器内部间距
GO TO FULL VERSION