<font>标签不支持两端对齐且已被HTML5废弃;text-align:justify须作用于块级容器(如<p><div><td>),中文需配合text-justify:inter-character及lang="zh"和明确宽度。

<font> 标签本身不支持两端对齐,也不能通过任何属性(如 align)实现两端对齐。它早已被 HTML5 废弃,仅用于兼容极老的 IE 场景,且无排版控制能力。
text-align: justify 必须作用在块级容器上
两端对齐不是字体级行为,而是块级文本流的布局计算结果。<font> 是行内元素,即使包裹多行文字,浏览器也不会对其启用 justify 算法。
- 正确载体是
<p>、<div>、<td>等块级或表格单元格元素 - 必须显式设置
text-align: justify在该容器上,不能只写在<font>内部 - 若强行套用:
<font style="text-align: justify">文本</font>—— 完全无效,CSS 不会生效
中文两端对齐必须加 text-justify: inter-character
纯 text-align: justify 对中文基本没效果,因为浏览器默认不在汉字之间插入可伸缩空白。Chrome 120+、Edge 120+、Firefox 110+、Safari 17.4+ 支持 text-justify: inter-character,但它有硬性前提:
- 必须配合
text-align: justify同时使用 - 父容器或自身需声明
lang="zh",否则 Safari 可能静默失效 - 容器要有明确宽度(如
width: 300px),否则“两端”无参照 - 文本需足够长、能自然换行;单行仍需靠
text-align-last: justify补位
表格单元格里 text-align: justify 不继承,必须直接写在 td/th 上
常见错误是给 <table> 设置 text-align: justify,以为子单元格会继承——实际不会。表格规范明确禁止该属性继承。
立即学习“前端免费学习笔记(深入)”;
- 错误:
table { text-align: justify; }→<td>依然左对齐 - 正确:
td, th { text-align: justify; text-align-last: justify; text-justify: inter-character; } - 注意:移动端某些 WebView(如旧版 UC)可能忽略
text-justify,需降级为左对齐
真正可靠的两端对齐从来不是靠标签,而是靠容器语义 + 明确宽度 + 浏览器支持组合判断。别试图用 <font> 打补丁,它连起点都不在。



















