Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix the line-break of code #460

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Conversation

hszhakka
Copy link
Contributor

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
Copy link
Member

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
Copy link
Contributor Author

Please provide screenshots of before and after.

Before:

UNADJUSTEDNONRAW_thumb_7

After:

UNADJUSTEDNONRAW_thumb_6

@MichaelCurrin
Copy link

MichaelCurrin commented Nov 16, 2020

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
Copy link

MichaelCurrin commented Nov 17, 2020

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
Copy link

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.

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants