Don't allow <sup> to break line

Question

How to restrict for <sup> to go to the next line? Or at least somehow also show the previous word in the new line? I have an achor tags which links to a reference at the bottom of an article, but sometimes they will just go into next lines by itself, as you can see in the image. This can happen if there is a single <sup> too.

Currently I have this for css

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

And this is html code for a single <sup>

<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

Just replace your inline elements' spaces with   like this:

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

The   looks like a space to a person, but the browser treats the last word in your paragraph and the links as a single string.