直接设置text-align: justify可启用两端对齐，但需内容足够长、能换行成多行，且块级容器有明确宽度；单行无效，中文需配合text-align-last: justify或零宽空格，英文需空格分词或hyphens: auto。
直接给段落元素（如 p、div）设置 text-align: justify 就能启用两端对齐，但实际生效有前提：内容需足够长、能自然换行成多行，且浏览器要有可调整的间距锚点。中文和英文的表现逻辑不同，不能只加一行 CSS 就完事。
基础写法与生效条件
必须作用于块级元素，例如：
这是一段足够长的中文文本，至少要撑出两行以上才能看到两端对齐效果
- 单行文本不会触发 justify —— 浏览器没机会“拉伸”行内间距
- 容器宽度太小或内容太短（比如只有 3–4 个汉字），字间距会被强行撑开，视觉失衡
- 英文依赖空格分词，中文则靠字间微调；若整段是连续无空格字符串（如 URL、长拼音），justify 也无效
解决最后一行左对齐问题
CSS 规范规定最后一行默认左对齐，这不是 bug。想让它也“撑满”，可用以下任一方式：
- 在段末加一个零宽空格：
（HTML 实体）或\u200B（JS 插入），让浏览器认为还有“潜在换行点” - 用伪元素补一行：
::after { content: ""; display: inline-block; width: 100%; }，强制创建一个不可见的满宽行，使 justify 生效范围覆盖末行 - 现代浏览器支持
text-align-last: justify，更语义化，但 iOS Safari 和旧版 Android WebView 兼容性有限
中英文混排与常见坑点
英文两端对齐容易把单词间距拉得过大，中文虽较稳定，但仍有细节要注意：
- 英文建议配合
hyphens: auto（需设lang="en"）和word-break: break-word，避免单个长词破坏对齐节奏 - 中文慎用
letter-spacing模拟对齐——它会全局影响字距，小屏下易导致文字发散或重叠 - flex 容器中的子元素设
text-align: justify常失效，因 flex item 默认不占满父容器宽度；此时应改用justify-content: space-between处理并列词组 - 表格单元格（
<td>）里 justify 表现最稳定，天然具备宽度上下文 <h3>移动端与可访问性提醒</h3> <p>在手机小屏上，justify 的表现更敏感：</p> <ul> <li>建议搭配媒体查询，在屏幕宽度小于 480px 时降级为 <code>text-align: left，避免超窄行内字距失控 - 若用 JS 动态插零宽空格或不间断空格辅助对齐，记得加
aria-hidden="true"，防止屏幕阅读器误读为空格中断 - 标题、按钮、导航项等强调语义清晰的短文本，不要用 justify —— 易造成字距不均，降低可读性
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
