XSL FO实现表格单元格内容右对齐并填充前置省略点

核心方案（纯CSS实现，解决字符宽度不一致问题） #

通过CSS伪元素和定位实现，无需JS计算字符长度，完全基于实际渲染宽度处理，完美满足需求：

HTML 结构

<table class="align-right-table">
  <tr>
    <td><span>Short</span></td>
    <td><span>Long content that will overflow the cell width</span></td>
    <td><span>Wiiiiiiiiiiide</span></td>
    <td><span>Narrow</span></td>
  </tr>
</table>

CSS 样式

.align-right-table {
  width: 450px;
  border-collapse: collapse;
  margin: 20px 0;
}

.align-right-table td {
  width: 110px; /* 固定单元格宽度，可按需调整 */
  border: 1px solid #ddd;
  padding: 6px 10px;
  text-align: right; /* 强制右对齐 */
  overflow: hidden; /* 溢出内容隐藏 */
  position: relative;
  white-space: nowrap; /* 禁止换行，保证溢出逻辑生效 */
}

/* 用伪元素生成足够多的省略点填充空白 */
.align-right-table td::after {
  content: "............................................................";
  position: absolute;
  right: 10px; /* 和单元格右内边距保持一致 */
  z-index: -1; /* 让内容覆盖在省略点上方 */
}

/* 用背景色覆盖内容下方的省略点，只显示空白区域的省略点 */
.align-right-table td span {
  display: inline-block;
  background: #ffffff; /* 匹配表格背景色，非白色需修改此处 */
  padding-left: 5px; /* 给省略点预留显示空间 */
}

方案优势 #

1. 彻底解决字符宽度不一致问题：不管是宽字符（如W）还是窄字符（如i），都能基于实际占用宽度精准填充省略点
2. 完全满足约束要求：天然实现右对齐和溢出隐藏
3. 零JS依赖：纯CSS实现，性能更优，维护简单
4. 适配动态内容：只需替换<span>内的文本，无需额外逻辑处理

内容的提问来源于stack exchange，提问作者Developer