是否可以排除由于 CSS 中父段落文本对齐而导致 <span> 标签周围的间距增加？

Question

我正在 Calibre 中格式化电子书的 CSS，以便导出为 PDF 进行发布。我已经完美格式化了所有内容，但遇到了问题。

文本正文是段落样式定义，我使用

text-align: justify;

应用了全文对齐，以便在打印时更方便查看。然后，软件会调整每个单词之间的间距以使其正确对齐。

我遇到的问题是，我的参考标记分散在整个文本中，并用数字表示。我为它们创建了一个跨度样式，以便以不同的颜色显示它们。调整时，在某些地方，文本会在上一个/下一个单词和参考标记编号之间呈现出巨大的空间。例如，它可能看起来像这样：

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>

我尝试将

display: inline-block

添加到“数字”跨度定义中，但这并没有解决问题，因此它不包含在上面的代码片段中。

澄清一下，这里的问题是在 span 标签的内容和剩余段落文本之间添加的额外空格。

是否可以在跨度样式定义或父段落样式定义中执行任何操作，以强制数字标记的跨度样式之前和之后都有一个空格？

谢谢。

Answer 1

您可以删除空格并使用填充代替。例如：

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;
  padding-inline: 5px;
}

<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>