Search code examples
htmlcssemaillayoutword-wrap

Creating a layout for email using html and css - word wrap

Work with html layout for email is a real nightmare!

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:

enter image description here

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

https://login.live.com/ppsecure/post.srf?wa=wsignin1.0&rpsnv=12&ct=1458752139&rver=6.4.6456.0&wp=MBI_SSL_SHARED&wreply=https:%2F%2Fmail.live.com%2Fdefault.aspx&lc=1146&id=67855&mkt=pt-br&cbcxt=mai&bk=1458152139&uaid=65b544e4d6a0424fa4b0dce1d5abaceb&pid=0

And here is the result:

enter image description here

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:

<div style="width: 100%; word-wrap: break-word; overflow: auto; display: inline-block;">

Here is the complete code: https://jsfiddle.net/uayazs59/1/

Please, can someone help me? Thank you so much!!

Solution

  • It seems like the width of your link's DIV is making the whole table act improperly so change your width to a spicific amount like: width: 570px; 

    <div style="width: 570px; word-wrap: break-word; overflow: auto; display: inline-block;">