Fix some x overflows

[lf-]

This PR fixes long inline code doing an x overflow.

There's another x-overflow on this page, where the table with the heading "punycode + encoding" also overflows slightly. I have fixed this one as well.

Spotted on
https://rust-lang.github.io/rfcs/2603-rust-symbol-name-mangling-v0.html

[ehuss]

Thanks, I have a few questions, though:

What does the overflow-x do specifically? What circumstances are there when the tables overflow? Can you show screenshots of the differences?

Can you say more about why this uses a div wrapper? Is it a concern about <table> being used by other things?

Are there any concerns about using word-break: break-word;? According to MDN it is deprecated. I'm not sure what deprecated even means in this case. Would it maybe be better to use overflow-wrap: anywhere?

[lf-]

Thanks for the review! Looking deeper into these questions has been useful for me as a CSS non-expert.

What does the overflow-x do specifically? What circumstances are there when the tables overflow? Can you show screenshots of the differences?

Tables overflow like this:

The conditions in which this happen are when there are long cells (I stuffed some extra long text into the cell to get it to overflow a little harder) or generally more width than fits on the screen.

This is what the overflow-x: auto on the wrapper div does: it makes the table scrollable horizontally rather than making the entire page scrollable horizontally:

The reason it needs to be on a wrapper div with the overflow-x: auto on it — or at least my best guess of it based on reading MDN — is that table elements are display: table rather than display: block (indeed overriding them to display: block has it scroll the table itself. It appears, however, that the element then doesn't end up centered with the margin: 0 auto on it, so I think we probably need the wrapper?). This SO answer claims that display: table in some parent is required for table cell rendering to work properly.

---

Are there any concerns about using word-break: break-word;? According to MDN it is deprecated. I'm not sure what deprecated even means in this case. Would it maybe be better to use overflow-wrap: anywhere?

I somehow missed the deprecation notice, my bad (from further googling, it was deprecated as of CSS 3). I can confirm that overflow-wrap: anywhere gets the same effect.

From putting some long stuff into a paragraph, I realized we probably should enable this everywhere on the app since it's possible to cause x overflows with body text too. I am going to do that:

overflow-wrap: always on main:

Some code, overflowing without word breaking configured:

With wrap turned on:

[YJDoc2]

@lf- @ehuss please take a look :
Following tests are done on the test_book, which I have requested to be added in PR #1662, it can be found in my fork at https://github.com/YJDoc2/mdBook/tree/test-book

I think rather than overflow-wrap: anywhere , overflow-wrap: break-word will be a better choice :
I checked this on Linux + Firefox + (Desktop mode / Mobile mode) and Linux + Brave (chromium based) + (desktop/mobile) mode, following results are consistent on both.

Original

This is without the changes in this PR
Original table desktop

Original Table mobile

As you can see this makes the whole page scroll in mobile, rather than the table (evident by the page title being off screen), which was the issue.

After this PR

The issue is due to overflow-wrap: anywhere, this also breaks the words which should not be broken, and the tables don't scroll
For example, on desktop mode :

this breaks words col2 and val2, which definitely should not have been broken on desktop.
On mobile, it is worse :

Here, to prevent overflow, it breaks every word into characters and wraps them around.

With suggested changes

Now with using

main {
    overflow-wrap: break-word;
}

(table wrapper class introduced in this PR is kept as in this PR)
we get :
on desktop :

and on mobile :

where it scrolls the table, rather than scrolling the whole page, as evident by the page title staying in view, and the columns being scrolled.

[ehuss]

Oh, yea, it looks like break-word looks better to me.

[ehuss]

@lf- Would you be willing to update this using break-word?

[lf-]

Done and rebased.

[lf-]

@ehuss if you missed the notif

[ehuss]

Thanks! I'm going to go ahead and merge, though I still have some concerns about how this might impact or break things. I can't think of any specific problems, and testing on a variety of browsers seems to be OK.