50

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

ew

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:

16
  • Hmm, no repro here. Are you zoomed out by any chance?
    – Adam Lear StaffMod
    Jan 9 '14 at 0:53
  • @AnnaLear Nope. Windows 7 on Chrome 31.0.1650.63; no userscripts running on the site. Zooming in and out doesn't move the "(1)" back on to the same line as "reopen", either.
    – senshin
    Jan 9 '14 at 0:54
  • What's your screen resolution?
    – Adam Lear StaffMod
    Jan 9 '14 at 0:55
  • @AnnaLear 1920x1080
    – senshin
    Jan 9 '14 at 0:55
  • 5
    For what it's worth, I've seen this occasionally too.
    – ale
    Jan 9 '14 at 0:56
  • 2
    Here's a full screenshot of the page on my machine (full-screened, but it happens even when non-full-screened): i.imgur.com/kcZ8qTi.png
    – senshin
    Jan 9 '14 at 0:57
  • 1
    Similar/related issue on dba.SE
    – Aaron Bertrand Staff
    Jan 9 '14 at 1:38
  • I've seen this occasionally on code golf but never bothered to report. +1
    – Doorknob
    Jan 9 '14 at 1:51
  • 1
    I've reproduced this, just by changing "mod" to "protect". Since the only breaking space is the one before the (1), that's where it wraps.
    – Shog9
    Jan 9 '14 at 3:14
  • @Shog9 Ahhh. I somehow missed "protect".
    – Adam Lear StaffMod
    Jan 9 '14 at 3:14
  • @senshin I've looked up ilk in a dictionary but I still don't understand what the word means in this context.
    – Stijn
    Jan 9 '14 at 9:09
  • 3
    @Stijn "and its ilk" = "and things of that sort", meaning "and also things like 'close (1)', 'delete (1)', etc.". I'm sure ELL or ELU would be glad to answer in greater depth if you want to ask there! :)
    – senshin
    Jan 9 '14 at 9:14
  • With the addition of the "rollback" link, this can now be reproduced right here on Meta. Apr 19 '14 at 13:40
  • @Anna is this Jin's area, or can any dev fix it? Just asking... ;) Sep 15 '14 at 12:41
  • @ShadowWizard no one dev will fix it because it's too minor. No matter how many votes on the post. Jul 13 '17 at 4:55
12

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('&#x200B;')

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:

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.

7

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

1
  • 2
    So, status-completed then?
    – Shog9
    Jan 9 '19 at 21:02

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .