Force breaks on extremely long words in comments

[danxuliu]

If not broken extremely long words overflow their container; I have added the break rule to the whole comment, so it will be used too in author names (even if it is highly unlikely that any author name would be long enough to overflow...).

Before:

After:

[codecov]

Codecov Report

Merging #7163 into master will decrease coverage by 0.08%.
The diff coverage is n/a.

@@             Coverage Diff              @@
##             master    #7163      +/-   ##
============================================
- Coverage     50.84%   50.75%   -0.09%     
+ Complexity    24545    24479      -66     
============================================
  Files          1585     1581       -4     
  Lines         93796    93578     -218     
  Branches       1354     1353       -1     
============================================
- Hits          47687    47492     -195     
+ Misses        46109    46086      -23

Impacted Files	Coverage Δ	Complexity Δ
lib/private/Template/JSResourceLocator.php	0% <0%> (-50.91%)	22% <0%> (-1%)
lib/private/Files/ObjectStore/S3ObjectTrait.php	54.71% <0%> (-3.18%)	11% <0%> (-2%)
lib/private/Template/ResourceLocator.php	67.74% <0%> (-1.62%)	25% <0%> (ø)
apps/dav/lib/CalDAV/Schedule/IMipPlugin.php	72.02% <0%> (-0.98%)	54% <0%> (ø)
apps/dav/lib/CalDAV/CalendarObject.php	90.69% <0%> (-0.97%)	20% <0%> (-6%)
lib/private/User/Database.php	70.86% <0%> (-0.46%)	45% <0%> (ø)
...b/private/Files/ObjectStore/ObjectStoreStorage.php	66.66% <0%> (-0.28%)	74% <0%> (ø)
apps/dav/composer/composer/autoload_static.php	0% <0%> (ø)	1% <0%> (ø)	⬇️
lib/private/Template/CSSResourceLocator.php	0% <0%> (ø)	26% <0%> (ø)	⬇️
core/templates/login.php	0% <0%> (ø)	0% <0%> (ø)	⬇️
... and 12 more

[jancborchardt]

break-all breaks all words, hence this is needed:

 -ms-word-break: break-all; word-break: break-all; word-break: break-word;

[danxuliu]

@jancborchardt Are -ms-word-break: break-all and word-break: break-word really needed?

According to Can I Use word-break: break-all is supported by Internet Explorer, so I guess that -ms-word-break: break-all would not be needed.

Can I Use also says that word-break: break-word is an unofficial value that WebKit browsers treat like word-wrap: break-word, which produces a less pleasant (in my opinion) break, as long words are moved to their own line. See:
word-wrap: break-all:

word-wrap: break-word:

[jancborchardt]

@danxuliu try out with a longer sentence which has one really long word but a lot of regular, non-overflowing ones in it. With break-all, the regular ones will also be broken. (Yeah it's a mess)

[danxuliu]

@jancborchardt

try out with a longer sentence which has one really long word but a lot of regular, non-overflowing ones in it. With break-all, the regular ones will also be broken. (Yeah it's a mess)

Ugh, you are totally right.

Should we use word-wrap: break-word; overflow-wrap: break-word; (it seems that Internet Explorer and Edge require the use of the legacy name) or -ms-word-break: break-all; word-break: break-all; word-break: break-word;?

[jancborchardt]

@danxuliu I think we need both, see https://css-tricks.com/almanac/properties/w/word-break/

[danxuliu]

@jancborchardt

I think we need both

Mmm, I have tested it in Firefox and Chromium and it seems that, in practice, word-wrap/overflow-wrap is ignored when word-break is set. So given this summary I would go with word-wrap/overflow-wrap, but you decide :-)

[jancborchardt]

@danxuliu do you have a solution which both:

1. Does not cut off words which do not need to be cut
2. Cuts words which are in total wider than the textbox

If so, we should use that. :) If not we need to decide what is more important to us. (I would say not messing with regular words is more important.)

[danxuliu]

@danxuliu do you have a solution which both:

Me? I am just a CSS wannabe :-P You are the master here ;-)

Anyway, based on all of the above (and for latin-based scripts; I do not know about others, sorry :-( ), the summary is:

• word-break: break-all is supported in all browsers, and it breaks everything when the end of the line is reached. Due to this any word, no matter its length, is broken at arbitrary points (syllables are not respected).

• word-break: break-word is WebKit only, and it is virtually the same as using word-wrap: break-word; overflow-wrap: break-word;.

• word-wrap: break-word; overflow-wrap: break-word; is supported in all browsers, and it breaks words only when they are wider than its container.

1. Does not cut off words which do not need to be cut
2. Cuts words which are in total wider than the textbox

If so, we should use that. :) If not we need to decide what is more important to us. (I would say not messing with regular words is more important.)

I totally agree with not messing with regular words. Therefore I guess that the winner is word-wrap: break-word; overflow-wrap: break-word; ;-) I have amended the original commit to use that instead of word-break: break-all.

The only value that I can see in word-break: break-all is that words nicely fill the remaining space in the previous line, while word-wrap/overflow-wrap: break-word always move words that do not fit in the remaining space to a new line, no matter its length, and then breaks them arbitrarily if they are wider than the container. But, as agreed, not messing with regular words is more important ;-)

[jancborchardt]

Seems good - we can always enhance as we go forward. Especially as I hope CSS will improve here :D