如何避免Calibre中<span>标签因段落两端对齐产生额外间距？

我在Calibre中配置电子书CSS用于导出PDF，正文段落通过text-align: justify;设置两端对齐以提升打印可读性，但文本中的数字参考标记（使用span.Numeral样式）在两端对齐时，与前后文本间出现过大间距，示例如下：

word  anotherword shortword     2  longerword   word  

相关CSS样式定义：

p.Body-Text {
  -epub-text-align-last: left;
  font-size: 1em;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  margin-bottom: 0.5em;
  margin-top: 0.5em;
  orphans: 1;
  text-align: justify;
  text-indent: 1.5em;
  line-height: 1.2;
}

span.Numeral {
  color: #7f7f7f;
  font-size: 0.75em;
  vertical-align: text-top;
}

HTML示例片段：

<p class="Body-Text"><span class="Numeral">1 </span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <span class="Numeral">2 </span>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <span class="Numeral">3 </span>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. <span class="Numeral">4 </span>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

我曾尝试为span.Numeral添加display: inline-block，但未解决问题，现需通过CSS设置确保span标记前后仅保留单个空格。

可行解决方案 #

方案一：阻止空格拉伸

给span.Numeral添加white-space: nowrap，让数字标记及相邻的空格不参与两端对齐的间距拉伸：

span.Numeral {
  color: #7f7f7f;
  font-size: 0.75em;
  vertical-align: text-top;
  white-space: nowrap;
}

同时建议将HTML中span内的 （非断空格）替换为普通空格，避免额外的强制间距。

方案二：固定间距控制

使用display: inline-flex结合margin来精确控制标记与前后文本的间距，确保不受两端对齐影响：

span.Numeral {
  color: #7f7f7f;
  font-size: 0.75em;
  vertical-align: text-top;
  display: inline-flex;
  margin-right: 0.25em; /* 根据需求调整右侧间距 */
  margin-left: 0;
}

方案三：使用文本换行控制属性（Calibre支持时）

若Calibre的PDF渲染引擎支持较新CSS属性，可使用text-wrap: nowrap：

span.Numeral {
  color: #7f7f7f;
  font-size: 0.75em;
  vertical-align: text-top;
  text-wrap: nowrap;
}

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