Long code lines expands text outside view on mobile.

[stigvoss]

I am experiencing issues where long code lines in a code block can cause mobile browsers to overflow without scrollbars either in the view or the code block.

An example would be a code block like below:

try
{
    tokenSource.CancelAfter(requestTimeout);
}

I am attempted to fix the issue, but unsuccessfully.

[ahmadajmi]

The following CSS might be a good fix:

pre { word-break: break-all; }

[stigvoss]

The break-all keyword does not seem to be recognized by my Firefox browser, although anywhere seem to exist and works for breaking the lines, well, anywhere.

It works as a fix, I assume the alternative would be to allow horizontal scrolling in code blocks. I'm not sure which is the better solution as both broken lines and scrolling makes it difficult to read code on a mobile device.

Would you know of a way to allow horizontal scrolling in a code block?

[stigvoss]

After having a look at the issue again, I have to conclude that I confused word-wrap and the word-break you refer to above. You are correct that the following will solve the issue.

pre {
  word-wrap: break-word;
  word-break: break-all;
}

Besides that, the issue only seemed to surface in Firefox, not Chrome.

[ahmadajmi]

Thank you! I merged the PR. I tested it in Firefox and seems to be working fine too.

Screenshot:

[ahmadajmi]

Would you know of a way to allow horizontal scrolling in a code block?

I created a new issue at the moment for this and I will look into it further.