CODEWITHSUNDEEP
htmlcss
Marko
Marko

Reputation: 1487

Don't allow <sup> to break line

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>

enter image description here

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>

Upvotes: 4

Views: 1960

Answers (1)

adriancarriger
adriancarriger

Reputation: 3000

Working JSFiddle

Just replace your inline elements' spaces with &nbsp; 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 &nbsp; looks like a space to a person, but the browser treats the last word in your paragraph and the links as a single string.

Upvotes: 3

Related Questions