title: Prevent words from breaking/wrapping mid-word in iOS email client
body: <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/RcGvU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RcGvU.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="row"&gt;
      &lt;tbody&gt;
      &lt;tr class="mail-title"&gt;
          &lt;td class="wrapper last"&gt;
              &lt;table class="twelve columns"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;
                          &lt;h1 class="center"&gt;YOUR ORDER 101 HAS BEEN DISPATCHED&lt;/h1&gt;
                      &lt;/td&gt;
                      &lt;td class="expander"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.mail-title h1 {
      font-size      : 18px;
      text-transform : uppercase;
      font-weight    : normal;
      word-wrap      : none;
      word-break     : break-all;
  }
  </code></pre>
  
  <p>I am using the <a href="http://zurb.com/ink/" rel="nofollow noreferrer">Zurb Ink email framework</a>, which is what the <code>wrapper</code>, <code>last</code> and <code>expander</code> classes are for.</p>
  
  <p>I'#ve had a look at <a href="https://stackoverflow.com/a/2259695/691505">this answer</a>, which makes sense as Ink defaults to <code>break-word</code>, but this doesn't work on iOS mail.</p>