CM
3
Prevent Words from Breaking Mid-Word in iOS Mail
I am building markup for an HTML email, however I can't seem to find a solution to prevent a word from breaking mid-word like this in iOS email client:
<table class="row">
<tbody>
<tr class="mail-title">
<td class="wrapper last">
<table class="twelve columns">
<tr>
<td>
<h1 class="center">YOUR ORDER 101 HAS BEEN DISPATCHED</h1>
</td>
<td class="expander"></td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
.mail-title h1 {
font-size : 18px;
text-transform : uppercase;
font-weight : normal;
word-wrap : normal !important;
white-space : no-wrap !important;
}
I am using the Zurb Ink email framework, which is what the wrapper, last and expander classes are for.
Any help appreciated.
This answer is specific to those implementing email templates with Zurb Ink. So, it appears this is default Ink styling. See here: https://github.com/zurb/ink/blob/master/css/ink.css#L71
I changed the declaration of td to be as below:
Fixed.
more @ http://stackoverflow.com/a/33016940/691505
note that curently yahoo.com Mobile Website is overwriting the word-break css property
Try using <nobr> tags around the word. Usually works for me.
This worked for me for me on IOS devices... I've always had a problem with those. Thank you
Or include
for non-breaking space between words or phrases where you don't want a linebreak. Robert Berinti covered this in his #TEDC15 presentation as a way to avoid orphans. But I sprinkle these into paragraph text here and there as needed.It's not exactly the fix to your breaking mid-word, but it would allow you to force "BEEN DISPATCHED" or "HAS BEEN DISPATCHED" to wrap to the second line as a whole phrase and never have 'dispatched' become an orphan. Cleaner look IMO.
Neither solution was working for me without also defining
word-break, so I have ended up with using all these styles:word-break: keep-all;
word-wrap: normal;
white-space: nowrap;
I add the following reset styles to my head stylesheet. This will force words to wrap between words, however still allow long words to break between letters when necessary, such as in the case of urls.
table {border-collapse: collapse !important; table-layout: fixed; overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; word-break: break-word;}Try adding <span style="white-space:nowrap;">DISPATCHED</span>
Ran into this issue for iOS10 mobile devices where text within a 2-column nested table was not just breaking, but cascading down vertically. Didn't have the problem with previous versions of iOS - it's a new issue. It was horrendous! Looked everywhere for a solution, and none of these other options worked. I spent hours looking for a fix...
Finally, I got it: word-break:keep-all.
I insert it that along with the rest of the inline styling. Works like a charm.