text-align-last可精准控制末行对齐，需配合text-align: justify使用；兼容性有限时可用letter-spacing微调；flex布局更适合多子项独立对齐。
用 text-align-last 控制末行对齐方式
中文排版里“两个字”和“三个字”在块内右对齐或居中时看起来不对齐，本质是浏览器按字符数平均分配剩余空间，不是按视觉宽度。直接设 text-align: center 或 right 没用，得干预最后一行的对齐逻辑。
现代浏览器（Chrome 57+、Firefox 61+、Safari 15.4+）支持 text-align-last，它专门管最后一行怎么对齐。配合 text-align: justify 使用，能强制把短文本（如“你好”“欢迎光临”）撑开到容器宽度，再让末行按指定方式对齐。
-
text-align: justify是前提，否则text-align-last不生效 - 对纯中文，
text-align-last: center效果最自然；若要右对齐末行，用right - IE 完全不支持，需确认目标环境；移动端 Safari 旧版本可能有兼容问题
.item {
text-align: justify;
text-align-last: center;
width: 120px;
}
用伪元素 + letter-spacing 手动微调
当需要兼容老浏览器，或只差 1–2 像素的视觉对齐时，用伪元素补空格太糙（中文字体空格宽度不稳定），更稳的方式是靠 letter-spacing 拉伸字符间距，再结合 text-align 控制整体位置。
关键点在于：两个字的文本比三个字少一个“间隙”，所以给两字加一次额外间距，就能视觉上对齐。
立即学习“前端免费学习笔记（深入）”；
- 给两字文本加
class="two"，三字用class="three" -
.two { letter-spacing: 0.3em; }（值需根据字体、字号实测，通常 0.2–0.4em） - 必须搭配固定宽容器和
text-align: center，否则拉伸后会溢出或偏移 - 不同字体下
letter-spacing表现差异大，思源黑体和微软雅黑效果就不一样
避免用 或 padding 硬凑
有人试过在两字后面加 或给两字元素加 padding-right，短期看似对齐，但实际埋了三个坑：
- 响应式下容器变窄时，
-
padding是固定像素，字号缩放后对齐立刻失效 - 屏幕阅读器会读出
- 维护成本高——每新增一个文案都要手动判断字数、加类、调参
Flex 布局下用 justify-content + 固定宽度子项
如果这两个字/三个字是并列的按钮、标签之类，不在同一行内混排，而是各自独立的块级元素，就别在文本对齐上死磕，改用布局手段更可靠。
核心思路：让每个子项有相同宽度，再统一设置内容对齐方式，视觉上自然齐整。
- 父容器设
display: flex和justify-content: center（或space-between） - 每个子项设固定
width（比如80px）和text-align: center - 用
min-width替代width更灵活，防文字过长溢出 - 注意
box-sizing: border-box必须设，否则 padding/border 会让实际宽度失控
