Menu
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>
946
Use word-wrap:break-word; It even works in IE6, which is a pleasant surprise. word-wrap: break-word has been replaced with overflow-wrap: break-word; which works in every modern browser.
In Internet Explorer, browse to the HTML page that you saved as a file. Then, choose File | Send | Page by Email.
When you wrap long lines of text, the Outlook email client automatically breaks sentences away from the current line to start on a new line. This shortens the length of all outgoing emails and is similar to narrowing the margins of the writing space. Open Outlook and go to the File menu. Select Options.
Use the Microsoft proprietary word-break:break-all;
<td style="word-break:break-all;">
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.
More info in the following links:
<wbr> - MDN - Mozilla Developer NetworkHope this helps.
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
