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.