Unfriendly word-splitting on links in emails

[mattcen]

Problem and impact

When sending an email with Pretix which contains hyperlinks with text that gets split across multiple lines, the text gets split mid-word.

Digging suggests the problem is here:

pretix/src/pretix/base/templates/pretixbase/email/base.html

Line 91 in aee86de

word-break: break-all;

Which was last changed in 0990eee.

(FYI @daisylb)

Expected behaviour

Splitting should occur on word boundaries.

Steps to reproduce

No response

Screenshots

Link

No response

Browser (software, desktop or mobile?) and version

Problem occurs when email is viewed in FastMail web UI, Apple Mail 16.0 (3731.700.6), Thunderbird 115.1.0

Operating system, dependency versions

No response

Version

Instance running at https://pretix.eu/pyconau/2023/

[raphaelm]

Hmm, this is tough. We introduced this new CSS because people where complaining about long links (like a MS teams invitation link) breaking the entire layout of the email. Not sure how a middle ground could look here (that is still supported by many email clients, which often have an old HTML engine)

[mattcen]

Hmm, yeah, I acknowledge that would be a more significant issue than the mid-word splitting I'm seeing. ☹️

[wiffbi]

Wouldn’t word-wrap: break-word; do what we want? The behaviour with long MS-teams-links would change a little bit as in if they are longer than the remaining line, they would start on a new line and then break mid-word if they are longer than the full line. See example and play with adding words at https://jsfiddle.net/4AKhn/1/ from the first comment at https://stackoverflow.com/a/3058881

[raphaelm]

We already set break-word before:

pretix/src/pretix/base/templates/pretixbase/email/base.html

Lines 72 to 92 in 827382e

	p {
	margin: 0 0 10px;
	/* These are technically the same, but use both */
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	-ms-word-break: break-all;
	/* Adds a hyphen where the word breaks, if supported (No Blink) */
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto;
	}
	p a {
	word-wrap: anywhere;
	word-break: break-all;
	}

Unfortunately, I'm unable to find the support request that caused me to add break-all currently. I assume that some email clients do not support break-word, or I would have never added the break-all