Add a non-breaking space to "reopen (1)" and its ilk

Question

If you go to this question and are a 4k+ user on Anime.SE, you will see the following:

There is one reopen vote on this question, but the reopen vote count is displayed on a different line than the word "reopen". This is slightly silly, and would perhaps benefit from converting reopen (1) to reopen (1), and likewise for close and delete votes. (Or any other way of preventing a line break between the vote type and the vote count.)

A repro (the close link) from here on Meta:

Answer 1

A big part of the problem is that the line cannot break at the spaces between the links, since they're not actual spaces, but rather | characters styled to look like spaces:

<span class="lsep">|</span>

A fairly simple way to fix this, without messing with the existing styles on various Stack Exchange sites (on some of which the | characters are actually visible, and on some of which they're not) would be to modify the code that generates the menus to insert a Unicode zero width space (U+200B) after each separator bar. This would allow browsers to insert line breaks after the bars, making it much less likely that breaks get inserted within menu items.

You can test the effect of this change locally by opening the JavaScript console in your browser, while looking at a post affected by this issue, and running the following command:

$('.post-menu .lsep').append('​')

As for the original issue of line-breaks being inserted inside menu links, a simple way to prevent that would be to add the following CSS rule:

.post-menu a { white-space: nowrap }

In fact, the zero-width spaces could also be inserted using the CSS :after selector:

.post-menu .lsep:after { content: '\200B' }

---

Edit: I made that into a user script for GreaseMonkey / Chrome users. All it does is inject the two CSS rules shown above into all pages. Here's a screenshot:

(Note that the screenshot is also demonstrating another user script of mine.)

---

Edit 2: Turns out that content: '\200B' doesn't help in Chrome, but the following does:

.post-menu .lsep:after { content: ' '; font-size: 0px }

I've incorporated this new fix into a collection of various minor user script fixes and workarounds that I'm calling the Stack Overflow Unofficial Patch.

Answer 2

It looks like recent changes have fixed this issue. We're using display: inline-block which seems to handle the line break issue.