当文本对齐时删除文本和 <sup>reference</sup> 之间的 space
Remove space between text and <sup>reference</sup> when text is justified
在HTML 文档中，我使用 插入引用。问题是，当文本合理时，它们看起来很难看，因为引用本身被视为一个词，不会粘附在文本上。
它应该是这样的：
实际情况如下：
这是我使用的代码：
rials<sup class="reference"><a name="origin_ref_1" href="#target_ref_1">†</a></sup> and hardly
引用是页面底部的引用文本和文本中插入的引用符号（为方便起见）之间的来回 link。
我怎样才能使引用贴在文本上而不是多余的 space？
我试过了：
position:relative;
left:-xxxx em;
它成功地将引用移动到正确的位置，但没有改变单词之间的space量，从而增加了引用后的空白。此外，数量 XXX 与文本对齐有关。每行都不一样....
编辑：
这个问题似乎只影响 MAC 平台上的 Safari。但是我还没有完全测试过。
a{text-decoration:none;}
sup{padding:0px;margin-right:-5px;}
rials<sup class="reference"><a name="origin_ref_1" href="#target_ref_1">†</a></sup> and hardly
根据我的经验，只有当上标标签中的文本和它应该保持联系的父文本之间的 html 中有任何白色 space 时，这才是问题。
好：<p>Hello<sup>footnote</sup> Lorem......</p>
不好：<p>Hello <sup>footnote</sup> Lorem......</p>
不好：<p>Hello<sup> footnote</sup> Lorem......</p>
如果没有whitespace或者space，不间断space或者换行，那么浏览器会将父文本和sup文本视为一个单词，在计算对齐间距时。
解决方案是 Vitorino Fernandes 在已删除的评论中建议的解决方案。我希望他没有成为任意删除他的 post 的受害者，就像我最近来自堆栈交换团队（先开枪，然后再提问）一样。
既然他好像不在了，特此转载他的回答：
为了解决这个问题，我必须将 <sup> 标签设置为 inline-block。它是如此简单。然后一切都正确显示。我已经实施了解决方案。
完整 CSS 代码包括：
display: inline-block;
vertical-align: super;
font-size: 60%;
在HTML 文档中，我使用 插入引用。问题是，当文本合理时，它们看起来很难看，因为引用本身被视为一个词，不会粘附在文本上。
它应该是这样的：
实际情况如下：
这是我使用的代码：
rials<sup class="reference"><a name="origin_ref_1" href="#target_ref_1">†</a></sup> and hardly
引用是页面底部的引用文本和文本中插入的引用符号（为方便起见）之间的来回 link。
我怎样才能使引用贴在文本上而不是多余的 space？
我试过了：
position:relative;
left:-xxxx em;
它成功地将引用移动到正确的位置，但没有改变单词之间的space量，从而增加了引用后的空白。此外，数量 XXX 与文本对齐有关。每行都不一样....
编辑：
这个问题似乎只影响 MAC 平台上的 Safari。但是我还没有完全测试过。
a{text-decoration:none;}
sup{padding:0px;margin-right:-5px;}
rials<sup class="reference"><a name="origin_ref_1" href="#target_ref_1">†</a></sup> and hardly
根据我的经验，只有当上标标签中的文本和它应该保持联系的父文本之间的 html 中有任何白色 space 时，这才是问题。
好：<p>Hello<sup>footnote</sup> Lorem......</p>
不好：<p>Hello <sup>footnote</sup> Lorem......</p>
不好：<p>Hello<sup> footnote</sup> Lorem......</p>
如果没有whitespace或者space，不间断space或者换行，那么浏览器会将父文本和sup文本视为一个单词，在计算对齐间距时。
解决方案是 Vitorino Fernandes 在已删除的评论中建议的解决方案。我希望他没有成为任意删除他的 post 的受害者，就像我最近来自堆栈交换团队（先开枪，然后再提问）一样。
既然他好像不在了，特此转载他的回答：
为了解决这个问题，我必须将 <sup> 标签设置为 inline-block。它是如此简单。然后一切都正确显示。我已经实施了解决方案。
完整 CSS 代码包括：
display: inline-block;
vertical-align: super;
font-size: 60%;