Text overflow in project Notes and Credits

[Kenny2github]

Text overflows with really long links:

Steps to Reproduce

1. Go to https://scratch.mit.edu/projects/10135908/
2. Observe

Operating System and Browser

Windows 10 OS Build 17763.437, Chrome 73.0.3683.103

[Ascor8522]

Just add the line

.project-description {
    word-break: break-word;
}

to https://github.com/LLK/scratch-www/blob/develop/src/views/preview/preview.scss#L466

Before

After

I agree it might not be the prettiest solution, but at least it works and the layout is fixed...
Also, what are the odds for an user to type a 55+ characters long URL?

[benjiwheeler]

Looks like #3599 didn't get it right!

This is https://scratch.mit.edu/projects/361718885/ :

Yikes! Also see ModTools' user verification project, https://scratch.mit.edu/projects/10135908/ :

The main problem is that we should have used overflow-wrap: anywhere
Seems like the right combination to use is actually:

overflow-wrap: anywhere;
word-break: keep-all;

Adding those, the problem seems fixed:

Why keep-all?

keep-all is better than normal (or just omitting word-break: because it handles Chinese and other Asian languages better. With normal:

With keep-all:

[benjiwheeler]

For anyone trying to work on this:

You'll want to:

1. Find the same place in the code we edited in https://github.com/LLK/scratch-www/pull/3599/files
2. Instead of overflow-wrap: break-word;, put:

overflow-wrap: anywhere;
word-break: keep-all;

3. Test pages that overflow now, like https://scratch.mit.edu/projects/361718885/ and https://scratch.mit.edu/projects/10135908/ on various browsers -- or ask for help testing them

[apple502j]

@benjiwheeler Did you check the compat data? You need to bump supported versions (Chrome>=80, Firefox>=65) and drop Safari support.

[benjiwheeler]

@apple502j I did not check that! Hm, you're right, my proposed fix doesn't seem to work on Safari. I wonder how others are solving that problem...

It does seem that using word-break: break-word works on Safari (I have 12.1.1)...