9

I just recently came across a bug, I saw a post with code like this foo bar, with (`), but somehow it became like this:

It went under the "Featured on Meta" and "The Overflow Bug" banners and went out of the page...

This is surely a bug...

6
  • Reproed on Chrome but not Firefox. Looking at the source for the question though there are 100 redundant spaces in that inline code block, perhaps OP thought that was a good way to bring text to the next line. Commented Aug 31, 2021 at 5:08
  • @AbdulAzizBarkat Well even like that the code shouldn't let that happen... Commented Aug 31, 2021 at 5:14
  • 5
    Some code doesn't want to be framed ...
    – rene
    Commented Aug 31, 2021 at 5:16
  • not the first time it's reported: see last year on MSE. Transforming it to a code block "solves" this because the markup generated is <pre><code></code></pre> Commented Aug 31, 2021 at 5:23
  • That is not to say that this is not a problem: it is easily solved by giving the <code> a display: inline-block rule (example of the result) Commented Aug 31, 2021 at 5:29
  • @U12-Forward yeah, maybe this time it will get a [status-review] tag and finally fixed :( Commented Aug 31, 2021 at 5:31

1 Answer 1

4

Give it 6 to 8 weeks as usual.

In the meantime, you can use the following techniques to work around that:

  1. Switch inline code of this size to a code block by using fences (triple backticks) or four-space indentation as chances are there's simply a lot of significant whitespaces, or it should've been a multiline block in the first place:

    this                                    line                      is                   quite               long               (you           should              see               a              horizontal                        scroll                                           bar)
    

    Fixed image for posterity:

    code block version

  2. Use the force a custom CSS ruleset to override the display rule for <code> elements to inline-block (see MDN) which makes them take the best of both worlds (inline view for short blocks, multiline view for long blocks):

    code {
        display: inline-block;
    }
    

    Here is how this would look like for long blocks (short ones will stay the same):

    inline code if using display: inline-block

  3. As an alternative CSS technique, you can override the white-space rule to break-spaces for <code> elements instead (see MDN ref). This gives a similar result but preserves the inline appearance even if the code ends up spanning multiple lines:

    code {
        white-space: break-spaces;
    }
    

    And here is how it would look like:

    inline code if using white-space: break-spaces

4
  • 1
    Ah that's a clever hack! Thanks for your input! and the 6 to 8 weeks meme lol :) Commented Aug 31, 2021 at 6:38
  • 1
    NP - SE is a never-ending source of UI bugs to fiddle with :) Commented Aug 31, 2021 at 6:40
  • 1
    Haha! It's an amazingly huge network! having bugs is definite! :) Commented Aug 31, 2021 at 6:41
  • 1
    @U12-Forward I think it's called "We forgot to create test.." ;)
    – Scratte
    Commented Aug 31, 2021 at 6:43

You must log in to answer this question.

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