Break long words in html email in outlook 2010

html html-email outlook-2010

32,372

Solution 1

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

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

Solution 2

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.

Hoppe

C#, TypeScript, Azure, JavaScript, Angular, TypeScript, SQL Server

Updated on April 11, 2020

Comments

Hoppe about 4 years

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>