Search code examples
htmlioscssemailzurb-ink

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

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:

enter image description here

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.

Solution

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