JustPaste.it

HTML: Remove "word-break:break-all" & "hyphens:auto"

Yeah, the unexpected random word-breaks (eg. "s/ecurity", "ratin/g", "aut/omatically") along the right margins is still happening here too.

 

@ Martin Brinkmann -- I think it might be your use of "word-break:break-all" (emphasizing "break-all") in the webpage HTML-CSS code that's causing the problem.

 

Looking at the following section:

.dont-break-out{overflow-wrap:break-word;word-wrap:break-word;-ms-word-break:break-all;word-break:break-all;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.

 

Remove "-ms-word-break:break-all;word-break:break-all;", so that the section looks like:

.dont-break-out{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto}.

 

I previewed a sample Ghacks page code (eg. for this Thunderbird article) EXCLUDING all mentions of "word-break:break-all" in an online HTML editor, the text rendering looks much better -- no more random work-breaks along the right

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

 

However, the random line-break hyphenation (eg. ra-/ting, mak-/ing) is still distracting. So I removed "-ms-hyphens:auto;-moz-hyphens:auto;-webkit-hyphens:auto;hyphens:auto" as well, such that the said code section looks as follows:

.dont-break-out{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;}.

 

And Ghacks articles now look fine (I test-previewed 2 different articles) -- at least in Firefox & Basilisk. It is probably good to retain the "overflow-wrap:break-word" part, so that long jointed text (eg. "naked" URLs in the comments section) doesn't run outside the right margin.

 

For further info, check out the section titled "The Sledgehammer: word-break: break-all" at:

https://css-tricks.com/where-lines-break-is-complicated-heres-all-the-related-css-and-html

 

Notably, "word-break:break-all" literally allows words on the webpage to be truncated anywhere & anyhow -- which is fine for self-contained CJK (Chinese-Japanese-Korean) logographic characters, but breaks up romanized text in very strange ways.