html - 不允许 <sup> 断行

Question

如何限制 <sup>去下一行？或者至少以某种方式也显示新行中的前一个词？我有一个链接到文章底部引用的 achor 标签，但有时它们会自己进入下一行，如图所示。如果只有一个 <sup>，就会发生这种情况。也是。

目前我有这个用于 css

left: -3px;
top: -0.5em;
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;

这是单个 <sup> 的 html 代码

<a class="footnote" title="V. Umeljić, (2004.), U svijetu cvijeća i pčela: Atlas medonosnog bilja, Zagreb: Tisak" id="return-note-4832-1" href="#note-4832-1"><sup>[1]</sup></a>

safasdfasdfasdfsd asdf sdaf asdf asdfsadf sa fdas fg dfg sddfg sdfgsfgg sfg sdfg sdfgsdfg<a class="simple-footnote" title="V. Gligić, (1954.), Etimološki botanički rečnik, Tuzla: Grafičar" id="return-note-5174-4" href="#note-5174-4"><sup>[1]</sup></a>
<a
class="simple-footnote" title="V. Gligić, (1954.), Etimološki botanički rečnik, Tuzla: Grafičar" id="return-note-5174-4" href="#note-5174-4"><sup>[2]</sup>
  </a>

Answer 1

Working JSFiddle

只需将内联元素的空格替换为  ，如下所示:

&nbsp;<a class="footnote" title="V. Umeljić, (2004.), U svijetu cvijeća i pčela: Atlas medonosnog bilja, Zagreb: Tisak" id="return-note-4832-1" href="#note-4832-1"><sup>[1]</sup></a>&nbsp;<a class="footnote" title="V. Umeljić, (2004.), U svijetu cvijeća i pčela: Atlas medonosnog bilja, Zagreb: Tisak" id="return-note-4832-1" href="#note-4832-1"><sup>[2]</sup></a>

  看起来像一个空格，但浏览器会将段落中的最后一个单词和链接视为一个字符串。