User:Timeshifter/Sandbox13

https://support.mozilla.org/en-US/questions/1233316

Narrow the window. You will see that in Firefox there is no breakage of the colored boxes at the end of the line. It does not break the box in half, nor does part of the border split off.

NEW (left border stays with content):

HTML

<span class="citybox"><b><a href="/wiki/Mainz" class="mw-redirect" title="Mainz"> <span style="white-space: nowrap; word-break: keep-all; color: blue;">Mainz</span></a></b></span>

CSS

.citybox {white-space: nowrap; word-break: keep-all; display: inline-block;}
.citybox > b > a {border: 2px solid lime; border-radius: 7px; background-color: yellow; color: black; padding: 0 3px;}

That could be done inline, too, if the site doesn't allow defining new classes.

Red borders or other alternate colors could be applied directly to the inner element to override the lime.

---

---

Below I substituted red for lime

---

Internal link:

'''<span class=plainlinks style="border: 2px solid red; border-radius: 7px; background-color: yellow; color: black; padding: 0 4px;">[[Mainz, Germany|<span style="white-space: nowrap; word-break: keep-all; display: inline-block; color: blue;">Mainz, Germany</span>]]</span>'''

Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany Mainz, Germany

---

External link:

'''<span class=plainlinks style="border: 2px solid red; border-radius: 7px; background-color: yellow; color: black; padding: 0 4px;">[http://cannabis.shoutwiki.com/wiki/Mainz,_Germany <span style="white-space: nowrap; word-break: keep-all; display: inline-block; color: blue;">Mainz, Germany</span>]</span>'''

Mainz, Germany

---