Fix the line-break of code

[hszhakka]

On some browsers, the code in pre may be wrapped so that making the format looks ugly. So I add these attributes to force it can't be wrapped.

[ashmaroli]

On some browsers, the code in pre may be wrapped so that making the format looks ugly.

Please provide screenshots of before and after.

[hszhakka]

Please provide screenshots of before and after.

Before:

After:

[MichaelCurrin]

The after shot looks good.

Is it possible to edit overflow-x value on the pre tag instead to get the desired behavior? To avoid adding new CSS lines.

[MichaelCurrin]

Which browser are you using? The solution should be tested on a few browsers, with screenshots for each.

I am using Chrome in mobile preview mode. My page without your changes works expected (The code goes offscreen without any wrapping as expected). Even if I untick overflow-x, I still get the correct behavior.

Can you try overflow-x: auto or : scroll (both work for me) instead of your additional CSS and see if that solves it for you?

pre {
    padding: 8px 12px;
    overflow-x: scroll;
   /* ... */
}

Overflow-x is widely supported property but maybe your browser doesn't know what to do for auto. https://caniuse.com/?search=overflow

[MichaelCurrin]

I tried adding your changes in my browser mobile preview.

    white-space: pre;
    word-break: normal;
    word-wrap: normal;

Things looked fine - nothing got worse. I already had the correct wrapping so I can't tell if the changes help on other devices.

The word-break and word-wrap properties both default to the value normal, so they should not have to be set.

• https://www.w3schools.com/cssref/css3_pr_word-break.asp
• https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

The white-space value is the only one where you've a value different to default of normal https://www.w3schools.com/cssref/pr_text_white-space.asp

So see if you still get the correct behavior by leaving off the word- properties and keeping white-space.