如何让HTML表格中的多行内容实现两端对齐-html教程-PHP中文网

text-align: justify 必须显式设置在或上才生效，因表格单元格不继承的该属性；需配合 text-align-last: justify 修正末行对齐，中文推荐加 text-justify: inter-character（chromium 支持）。

如何让html表格中的多行内容实现两端对齐

text-align: justify 能让表格单元格里的多行文本两端对齐，但必须单独作用于 <td> 或 <code><th>，设在 <code><table> 上无效。 <h3>为什么 <code>text-align: justify 在表格里不生效

表格单元格默认不继承父级 text-align 值，哪怕你给 <table> 加了 <code>text-align: justify，<td> 仍按左对齐渲染。这是 CSS 规范明确规定的：<code>text-align 不会从 <table> 继承到单元格，必须显式设置在单元格级。 <ul><li>错误写法：<code>table { text-align: justify; } → 对 <td> 无影响 <li>正确写法：<code>td, th { text-align: justify; }

注意：单行中文通常不触发两端对齐，因为浏览器默认只在空格/标点处分隔加间隙；多行文本才更可靠

`text-align-last: justify` 补齐最后一行

即使启用了 text-align: justify，最后一行仍默认左对齐——这不是 bug，是规范行为。要让它也两端对齐，必须加 text-align-last: justify。

仅对最后一行（或唯一一行）生效，配合 text-align: justify 才完整
Chrome/Edge 120+、Firefox 91+ 支持良好；Safari 15.4+ 有限支持；IE 完全不支持
示例：td { text-align: justify; text-align-last: justify; }
若需兼容旧浏览器，可考虑用 ::after 伪元素插入不可见字符强制换行，或用 JS 动态补空格（不推荐，维护成本高）

中文两端对齐效果差？试试 `text-justify: inter-character`

中文没有天然词间空格，text-align: justify 默认只在 Unicode 分隔符（如空格、标点）处拉伸，导致字间距不均、行尾突兀。Chrome/Edge 120+ 开始支持 text-justify: inter-character，强制按字符间均匀分配空白。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

必须与 text-align: justify 同时使用，否则无效
当前仅 Chromium 内核主流支持，Firefox/Safari 尚未实现
安全写法：td { text-align: justify; text-justify: inter-character; }
不要依赖它做跨浏览器一致排版，建议作为增强项，而非基础方案

表格里别用 `letter-spacing` 模拟两端对齐

有人用 letter-spacing + 固定字数计算来“手动撑开”文本，比如 if(len($$$)=4,"<div style="letter-spacing:4px;">"+$$$+"</div>",...) ——这在报表工具（如 FineReport）里可行，但在纯 HTML/CSS 中极难维护。

字数一变，所有 letter-spacing 值都要重调；字体大小、字号缩放、响应式断行都会破坏效果
无法适配不同语言（中英混排、日文、阿拉伯文），且无障碍阅读器会把额外空格读出来
真正需要精确控制的场景（如发票、凭证打印），应交由后端生成 PDF 或使用专用排版引擎，而非前端硬凑

最稳的路径就一条：给 <td> 和 <code><th> 显式设 <code>text-align: justify，加 text-align-last: justify 补最后一行，再根据目标浏览器决定是否叠加 text-justify: inter-character。其它花招看着灵活，实际掉坑里出不来。