hteumeuleu
overflow-wrap is supported in Apple Mail
Can I Email says Apple Mail doesn't support overflow-wrap, but both Can I Use and MDN say it is supported.
- https://www.caniemail.com/features/css-overflow-wrap/
- https://caniuse.com/wordwrap
- https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap#browser_compatibility
@jensimmons I just sent that same test to myself and it's still not rendering correctly for me. I'm curious, though, how you injected HTML into a Mail compose window? The only way I know of is dragging an email draft to the desktop, updating the HTML in a text editor, and then importing the .eml back into Mail. Is there a better way?!
I highlighted the content of the test in a web browser window, copied it, and pasted it into a draft email.
That never seems to work for me. No matter which paste option I use, I always get the content without any styling. Not sure what's going on there.
Interestingly, when I inject the overflow-wrap test into a mail compose window using my export/import process, I get the same result you do:
Once I send it to myself, though, it renders incorrectly in the inbox.
It looks like Apple Mail default CSS styles include word-break: break-word; which affects this. It doesn't mean the overflow-wrap property isn't supported though.
Apple Mail ssems to support word-break. Here are some screenshots using the same test code but adding word-break: normal to reset Apple Mail's default CSS:
https://testi.at/proj/xlelivydsj4o09lz
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
width: 150px;
background-color: tomato;
margin: 20px;
}
</style>
</head>
<body>
<p>This is a very long word: <span style="word-break:normal; overflow-wrap: normal;">Pneumonoultramicroscopicsilicovolcanoconiosis</span> The word is 45 letters. <em>no wrap</em></p>
<p>This is a very long word: <span style="word-break:normal; overflow-wrap:normal;">Pneumonoultramicroscopicsilicovolcanoconiosis</span> The word is 45 letters. <em>overflow-wrap: normal</em></p>
<p>This is a very long word: <span style="word-break:normal; overflow-wrap:break-word;">Pneumonoultramicroscopicsilicovolcanoconiosis</span> The word is 45 letters. <em>overflow-wrap: break-word</em></p>
<p>This is a very long word: <span style="word-break:normal; overflow-wrap:anywhere;">Pneumonoultramicroscopicsilicovolcanoconiosis</span> The word is 45 letters. <em>overflow-wrap: anywhere</em></p>
</body>
</html>
