“两端对齐”需分场景：块级元素用 justify-content: space-between（flex 布局），中文文本用 text-align: justify 配合零宽空格或 text-justify: inter-character，但兼容性差且依赖内容与容器尺寸平衡。
直接说结论：“两端对齐”不是单一 CSS 属性能搞定的事，它分两种完全不同的场景：一种是多个块级元素在容器内左右贴边（比如导航栏的 logo + 右侧菜单），用 justify-content: space-between；另一种是一段文字内部字与字之间拉伸填满整行（比如新闻正文排版），靠 text-align: justify，但中文下几乎必然失效，必须加干预。
justify-content: space-between 适合两个或多个块级元素两端贴边
这是最稳定、最常用、浏览器支持最好的方式，专治“左边一个按钮，右边一个操作栏”这类布局。
- 父容器必须设
display: flex，且不能是inline-flex（否则宽度不占满） - 子元素不能设
flex: 1、width: 100%或其他强制撑满的规则，否则它们会互相挤压，space-between就没空间可“分”了 - 别给子元素设
margin-left/margin-right，尤其是第一个或最后一个，容易导致视觉偏移 - 如果只有两个子元素，它们会自动紧贴容器左右边缘——这就是你要的“两端对齐”，不需要额外计算
示例：
.header { display: flex; justify-content: space-between; padding: 0 20px; }
.logo { order: 1; }
.menu { order: 2; }
注意 order 不影响两端对齐逻辑，只是语义顺序。
text-align: justify 对中文段落基本无效，别硬扛
你写了 text-align: justify 却发现中文还是左对齐？不是代码错了，是浏览器根本没打算给汉字之间加弹性间距。它只在空格、标点等 Unicode 断点处拉伸，而中文段落往往没有这些。
- 单行中文一定无效——
justify至少需要两行以上才可能触发部分拉伸行为 - 最后一行永远默认左对齐，哪怕加了
text-align-last: justify，Safari 和旧版 Chrome 也大概率忽略 -
text-justify: inter-character是目前唯一靠谱的增强项，但仅 Chromium 120+ 和 Firefox 110+ 支持，Safari 17.4+ 才开始跟进，不能作为基础依赖 - 别用
letter-spacing手动模拟：字数一变就得重调，中英混排时顿号、句号后会出现诡异空隙
真要强推中文两端对齐，轻量做法是在每个中文字符后插入零宽空格 （即 ），再配合：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
p.justify {
text-align: justify;
text-align-last: left; /* 防止单字被撑满整行 */
}
但要注意：服务端渲染时需过滤掉标点后重复插入，前端 JS 注入要考虑复制粘贴带出不可见字符的问题。
表格单元格里用 text-align: justify 最接近“开箱即用”
相比普通 稳妥写法： 真正容易被忽略的点是：两端对齐从来不是“设个样式就完事”的排版动作。它高度依赖内容长度、容器宽度、字体度量值三者之间的微妙平衡。同一段 CSS，在桌面 Chrome 看着正常，到了 iOS Safari 或安卓 WebView 上可能整段缩进、字距崩坏。上线前务必在真实设备上测最小字号、最长行宽、最短句子这三组边界条件。 或 天然有明确宽度上下文， text-align: justify 在这里生效概率高得多。
td 或 th 上，table { text-align: justify } 完全无效——表格单元格不继承该属性text-align-last: justify 能提升末行对齐率，但 Safari 16 及更早版本仍不支持，建议降级为 text-align-last: left
text-justify: inter-character，但不要指望 Firefox/Safari 同步支持td, th {
text-align: justify;
text-align-last: left;
text-justify: inter-character;
}
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
