title: Force Long URL's to break with responsive div width 100% for html emails
body: <p>I am trying to create html e-mails that are responsive, I have the following row with two table datas, one of which contains a very long URL the other an image. I have tried everything, to make the URL break responsively, but it doesn't work in outlook.com, outlook 2011, iphone 4s and iphone5. what is the problem? </p>
  
  <pre><code>    &lt;td style="padding:0px 30px 0px 10px;max-Width: 500px; height:auto;display: inline-block; word-break: break-all;"&gt;
              &lt;div style="padding:0px 0px 0px 10px;width:100%;height:auto;font-size:12px;color:#999999; text-align:left; border: solid #999999 1px; line-height: 1.1em;word-wrap: break-word;-ms-word-break: break-all;word-break:break-all; word-break:break-word;-webkit-hyphens: auto; -moz-hyphens: auto;-ms-hyphens:auto; hyphens: auto;"&gt;
                      &lt;pre&gt;&lt;code&gt;&lt;p style=" word-wrap: break-word;"&gt;
  &amp;lt;a href="https://www.google.com/url?q=http://www.hi.com?utm_source%3Dexpert%2520sium%3Dexpert%2520badCNQcMIQSH8F4dPpFoA" rel="nofollow"&amp;gt;&amp;lt;img src="h1.png" alt="Expert"width="125px" height="125px"&amp;gt;&amp;lt;/a&amp;gt;
                       &lt;/p&gt;&lt;/code&gt;&lt;/pre&gt;
              &lt;/div&gt;
  
        &lt;/td&gt;
       &lt;td&gt;&lt;img&gt;&lt;/td&gt;
  </code></pre>