Break long words in html email in outlook 2010

19
votes

I'm taking end user input and inserting it into an HTML email. But if the end user enters a long URL or really long word, it breaks my HTML layout in Outlook 2010 by extending the column or div beyond the width specified.

In Chrome, Firefox, IE7+, and Safari, I can use style="table-layout:fixed" in order to force the table columns to certain widths. But Outlook 2010 ignores this, and the long word pushes the table width out beyond the fixed width.

With Divs, In Chrome, Firefox, IE7+, and Safari, I can use style="word-wrap:break-word; overflow:hidden; width:100px", to fix the div width. But in Outlook 2010, it pushes the div out beyond the fixed width.

How can I get outlook2010 to wrap the long word, and honor the fixed width?

Here is my sample HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<table width="400" style="table-layout: fixed" border="1">
    <tr>
        <td width="100">
            yo
        </td>
        <td width="300">
            Don't move me
        </td>
    </tr>
</table>
<table width="400" style="table-layout: fixed" border="1">
    <tr>
        <td width="100" style="word-wrap: break-word; overflow: hidden; width: 100px" border="1">
            yoooooooooooooooooooooooooooooooooooooooooooooooooooooo
        </td>
        <td width="300">
            Ya moved me
        </td>
    </tr>
</table>
<table width="400" border="1">
    <tr>
        <td width="100">
            <div style="word-wrap: break-word; overflow: hidden; width: 100px" border="1">
                yoooooooooooooooooooooooooooooooooooooooooooooooooooooo
            </div>
        </td>
        <td width="300">
            Ya moved me
        </td>
    </tr>
</table>
</body>
</html>
2
htmlhtml-emailoutlook-2010
A simpler solution may be to split the input / trim with elipsis beond certain length - Paul Sullivan
@PaulSullivan it's a messaging solution though, so I'm really hoping to provide the whole message text to the end user - Hoppe
then split the sentence - I believe Outlooks rendering engine is non standards based (and probably pretty undocumented as to how to force it to do what you want - google "outlook 2010 html rendering engine" - Paul Sullivan
and have you tried the pre css attribute - it MAY do something in 2010? see stackoverflow.com/questions/7284990/… - Paul Sullivan
Yep thats kinda what I was pushing you to do - it may not be elegant or clever but it gets the job done. - Paul Sullivan

2 Answers

44
votes

Use the Microsoft proprietary word-break:break-all;

  <td style="word-break:break-all;">
4
votes

I know I'm late to the party, but the recommendation I can make for others that bump into this post and want to use the property word-break:break-all; is to wrap the word you need to break in an element inside the <td> and then apply word-break:break-all;.

Like so:

<td>Serial #: <a href="#" style="word-break:break-all;">1111222233334444555566667777888899990000</a></td>

On this note you can also use other things to break long words like the <wbr> element, or the "zero-width space character" a.k.a. ZWSP which is &#8203;, and if you want hyphens when the text breaks, use the &shy;.

Check this (for now ugly ><) demo I made in CodePen: Word-breaks in long string words.

More info in the following links:

Hope this helps.