have backslash be an inline literal word wrap break character in HTML

[jbaylies]

Describe the bug

Similar to this issue for latex: #6000

When I view really/long/filepaths on mobile, they are not word wrapped, and just keep going off the side of the page.

How to Reproduce

build a doc that has text with a `really/long/filepath``, open the page on your smartphone, and the path will just keep going off the side of the page.

Environment Information

https://github.com/Sousastep/SousaFX-docs

Sphinx extensions

https://github.com/Sousastep/SousaFX-docs/blob/master/docs/conf.py

[jbaylies]

my workaround is to put this in custom.css

code {                                 
    white-space: pre-wrap !important; 
    word-break: normal;            
}

and add no-width spaces after the slashes in the file paths.

[mgeier]

@jbaylies Can you please provide a concrete test case (or multiple)?

I found the breaking behavior of inline literals (which I think is what you are talking about?) quite brittle.

I have created a test case to test this for my own theme: https://insipid-sphinx-theme.readthedocs.io/en/0.4.2/showcase/basic-formatting.html#inline-markup

My theme uses this CSS:

span.pre {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

... while basic.css uses this:

sphinx/sphinx/themes/basic/static/basic.css_t

Lines 774 to 780 in 6083351

	span.pre {
	-moz-hyphens: none;
	-ms-hyphens: none;
	-webkit-hyphens: none;
	hyphens: none;
	white-space: nowrap;
	}

---

It's even worse than I thought, because I just tried it with Chromium and it seems to behave different than Firefox.

Firefox:

Chromium:

It would be great if we could find a solution that looks the same on both!

[mgeier]

I just looked at the rendered reST page on GitHub: https://github.com/mgeier/insipid-sphinx-theme/blob/master/doc/showcase/basic-formatting.rst

It is also different between Firefox and Chromium!

So maybe (part of) it is a Firefox/Chromium inconsistency?