Creating a layout for email using html and css - word wrap
<p>Work with html layout for email is a real nightmare!</p>

<p>Well, my layout is almost finished, I spent 2 days working on it. The only problem I could not solve yet is related with word wrap. Here is a part of it:</p>

<p><a href="https://i.stack.imgur.com/Caef0.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Caef0.jpg" alt="enter image description here"></a></p>

<p>But sometimes the content of the table cell (div) is a url (link) like this:</p>

<blockquote>
  <p><a href="https://login.live.com/ppsecure/post.srf?wa=wsignin1.0&amp;rpsnv=12&amp;ct=1458752139&amp;rver=6.4.6456.0&amp;wp=MBI_SSL_SHARED&amp;wreply=https:%2F%2Fmail.live.com%2Fdefault.aspx&amp;lc=1146&amp;id=67855&amp;mkt=pt-br&amp;cbcxt=mai&amp;bk=1458152139&amp;uaid=65b544e4d6a0424fa4b0dce1d5abaceb&amp;pid=0" rel="nofollow noreferrer">https://login.live.com/ppsecure/post.srf?wa=wsignin1.0&amp;rpsnv=12&amp;ct=1458752139&amp;rver=6.4.6456.0&amp;wp=MBI_SSL_SHARED&amp;wreply=https:%2F%2Fmail.live.com%2Fdefault.aspx&amp;lc=1146&amp;id=67855&amp;mkt=pt-br&amp;cbcxt=mai&amp;bk=1458152139&amp;uaid=65b544e4d6a0424fa4b0dce1d5abaceb&amp;pid=0</a></p>
</blockquote>

<p>And here is the result:</p>

<p><a href="https://i.stack.imgur.com/TrqFu.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TrqFu.jpg" alt="enter image description here"></a></p>

<p>My goal is to make this kind of url to be "word-wrap" inside the cell without expanding it. I already tried many ways to solve this, without sucess. Here is what I got so far:</p>

<pre><code>&lt;div style="width: 100%; word-wrap: break-word; overflow: auto; display: inline-block;"&gt;
</code></pre>

<p>Here is the complete code: <a href="https://jsfiddle.net/uayazs59/1/" rel="nofollow noreferrer">https://jsfiddle.net/uayazs59/1/</a></p>

<p>Please, can someone help me? Thank you so much!!</p>