Prevent words from breaking/wrapping mid-word in iOS email client

Question

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:

HTML:

<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>

CSS:

.mail-title h1 {
    font-size      : 18px;
    text-transform : uppercase;
    font-weight    : normal;
    word-wrap      : none;
    word-break     : break-all;
}

I am using the Zurb Ink email framework, which is what the wrapper, last and expander classes are for.

I'#ve had a look at this answer, which makes sense as Ink defaults to break-word, but this doesn't work on iOS mail.

score 10 · Answer 1 · answered Oct 09 '15 at 17:31

10

Add the following into your custom styles section of your template to override Ink's styling.

td {
  word-break: break-word;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  hyphens: none;
  border-collapse: collapse !important;
}

answered Oct 09 '15 at 17:31

coryski

103
3

score 5 · Accepted Answer · answered Oct 08 '15 at 13:14

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:

td {
    word-break      : normal;
    border-collapse : collapse !important;
}

Fixed.

Nilesh Mahajan · Answer 3 · 2015-10-08T11:11:59.750

0

If you want a complete word instead of broken words. use white-space:nowrap; instead of word-break : break-all;

CSS

.mail-title h1 {
    font-size : 18px;
    text-transform : uppercase;
    font-weight : normal;
    word-wrap : none;
    white-space : no-wrap;
}

edited Oct 08 '15 at 11:11

answered Oct 08 '15 at 09:12

Nilesh Mahajan

3,506
21
34

This helps, thanks. However what I need is it to wrap but _not_ cut-off mid-word. So in the example above 'DISPATCHED' should fall down onto another line, however it should be the full word and not just 'PATCHED'. Is that possible? – crmpicco Oct 08 '15 at 09:56
white-space:no-wrap should take the word on the next line which is overflowing the width. – Nilesh Mahajan Oct 08 '15 at 11:12
With or without the `-` in `no-wrap` this doesn't seem to work in the iOS email app. – crmpicco Oct 08 '15 at 12:12

Prevent words from breaking/wrapping mid-word in iOS email client

3 Answers3