CSS text-align-last 语法
在 CSS 中，text-align-last 属性用于设置块级元素中最后一行文本的水平对齐方式。简单来说，它控制的是段落的最后一行该怎么对齐，比如居中、左对齐或右对齐。
语法：
text-align-last: 关键字;说明：
text-align-last 的取值是一个关键字，如下所示。
auto（默认值）：如果 text-align 属性设置为 justify，则最后一行默认左对齐（start）（为了防止最后一行字数太少时被强行拉伸）。对于其他值，最后一行与其保持一致。left：将最后一行对齐到容器的左边。right：将最后一行对齐到容器的右边。center：将最后一行在容器中居中对齐。justify：将最后一行进行两端对齐，像普通的段落一样，文字会铺满整行。start：根据文本的方向（从左到右或从右到左）来对齐最后一行，通常是从左边开始。end：start 相反，根据文本方向对齐最后一行到右边。
对于 text-align-last 属性，小伙伴们要清楚以下 2 点。
- text-align-last 属性只会影响块级容器中的最后一行文本，或在 br 标签、强制分页符等之前的文本行。
- text-align-last 属性通常与 text-align: justify; 一起使用，以控制最后一行不对齐的默认行为。当 text-align 为 justify 时，text-align-last: auto; 会使最后一行也两端对齐；而其他值（如 left、center、right）会覆盖 auto 的行为。
CSS text-align-last 摘要
| 属于 | CSS 文本属性 |
|---|---|
| 使用频率 | 低 |
| 是否继承 | 是 |
| 默认值 | auto |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS text-align-last 示例
接下来，我们通过几个简单的例子来讲解一下 CSS text-align-last 属性是如何使用的。
示例 1：text-align-last 基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 400px;
padding: 10px;
border: 1px dashed gray;
}
p:nth-of-type(1) { text-align-last: left; }
p:nth-of-type(2) { text-align-last: center; }
p:nth-of-type(3) { text-align-last: right; }
</style>
</head>
<body>
<div>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p><hr>
<p>水陆草木之花，可爱者甚蕃。晋陶渊明独爱菊。自李唐来，世人甚爱牡丹。予独爱莲之出淤泥而不染，濯清涟而不妖，中通外直，不蔓不枝，香远益清，亭亭净植，可远观而不可亵玩焉。</p>
</div>
</body>
</html>页面效果如下图所示。
分析：
从结果可以看出，text-align-last 属性只会影响块级元素内最后一行文本的对齐方式。
示例 2：text-align-last 用于强制换行前的行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 250px;
padding: 10px;
margin-bottom: 10px;
border: 1px solid gray;
text-align: left; /* 默认左对齐 */
text-align-last: right; /* 强制换行前的行右对齐 */
}
</style>
</head>
<body>
<div>
第一行文本。<br>
第二行文本。<br>
这是在强制换行前的最后一行。
</div>
</body>
</html>页面效果如下图所示。
分析：
text-align-last 也会影响在 br 标签等强制换行符之前的行的对齐方式。在这个例子中，虽然我们使用 text-align 属性指定了对齐方式是左对齐。是由于设置了 text-align-last: right;，因此每个 br 标签之前的文本行（即 "第一行文本。" 和 "第二行文本。"）都会被右对齐，并且容器的最后一行文本也会被右对齐。
