Break long words in html email in outlook 2010

Question

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>

A simpler solution may be to split the input / trim with elipsis beond certain length — Paul Sullivan, Apr 10 '12 at 20:35
@PaulSullivan it's a messaging solution though, so I'm really hoping to provide the whole message text to the end user — Hoppe, Apr 10 '12 at 20:41
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, Apr 10 '12 at 21:33
and have you tried the pre css attribute - it MAY do something in 2010? see http://stackoverflow.com/questions/7284990/css-how-to-break-long-words-in-a-table-td — Paul Sullivan, Apr 10 '12 at 21:40
@PaulSullivan pre doesn't do it for me. I did some googling with no luck. It may be faster to just write a function that inserts a space into any word longer than x characters — Hoppe, Apr 11 '12 at 13:47
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, Apr 11 '12 at 14:40

score 48 · Accepted Answer · edited Dec 06 '12 at 20:07

48

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

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

edited Dec 06 '12 at 20:07

Gilles 'SO- stop being evil'

104,111
38
209
254

answered Sep 05 '12 at 19:25

samanthasquared

1,847
1
18
17

2

It does indeed work just for MS Outlook. If you want cross browser, there is a discussion on this here - http://stackoverflow.com/a/12389079/1646397 – samanthasquared Sep 13 '12 at 16:44
2

In combination with word-wrap, it won't work anymore. Also, adding !important to any rule messes up Outlook (2007->2013). I did managed to make it work cross-clients/devices - but there are some display bugs in GMail as a side-effect of using word-break:break-all. Apart from that, to conclude: Use ONLY word-break:break-all on TD tag and table-layout:fixed on the parent table and it will work on all! clients. – Adrian Sep 17 '12 at 12:21
It's still the only thing that works on long unbroken text in td cells in Outlook 2013. – thinkOfaNumber Oct 21 '14 at 07:23
8

NOTE: This breaks word-wrapping for normal text! Your words will be cutoff in the middle on all clients if contained in a tag with this style. – Will Dec 04 '14 at 21:30
Does not work in outlook 365 for enterprise... I hate outlook – Black May 06 '21 at 07:44

Ricardo Zea · Answer 2 · 2015-04-10T16:56:02.333

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 , and if you want hyphens when the text breaks, use the .

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

Break long words in html email in outlook 2010

3 Answers3

Linked