Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Prevent word wrap on hyphen in html email in Outlook 2007 and Outlook 2010

This is my first post. So:

I'm working on an HTML e-newsletter using the same template I've used for a while now. The template has worked well until recently (the bit of code I have been using is below). Suddenly Outlook 07/10 are not behaving the same way I perceived that they had behaved in the past. They don't appear to be honoring white-space attribute when it comes to hyphens. All other email clients are behaving as I expect (they're honoring white-space attribute).

One of the elements in the newsletter is an ISBN, which is a set of digits separated by hyphens like, "978-1-555-97610-1". The ISBN is in a span tag that is part of a line of text inside a p tag that along with many other p elements, and possibly an img, reside inside a table. I need to prevent ISBNs from breaking on hyphens and wrapping onto new lines.

I can't use non-breaking hyphens, and I have researched this problem a lot in the past (I get a lot of ISBNs in my line of work), so I hope I'm not posting something that's already been answered a billion times.

Any help is deeply appreciated!

Thanks, Andrew.

CODE:

<p style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; color: #000000; margin-bottom: 0px; text-align: right;">
    Metropolitan Books &middot; 384 pages &middot; $18.00 &middot; paperback &middot;             
        <span style="white-space: nowrap;">978-0-8050-9466-4</span>
</p>
like image 444
SneakyOne Avatar asked Apr 19 '12 17:04

SneakyOne


People also ask

How do I stop text wrapping in Outlook?

Right-click the control for which you want to enable or disable text wrapping, and then click Control Properties on the shortcut menu. Click the Display tab. Select or clear the Wrap text check box.


3 Answers

How about non-breaking hyphen &#8209;

like image 139
Annett Avatar answered Nov 12 '22 07:11

Annett


Use the <nobr> tag.

E.g. <nobr>978-0-8050-9466-4</nobr>

like image 40
Krazer Avatar answered Nov 12 '22 07:11

Krazer


I needed to have an element not break in an email viewed through Outlook 2013, but not break on spaces. As much as I hate hacking, the way I tackled this issue was to use non-breaking hyphens, but set their color to the background-color of their parents:

<div style="background-color: #fff; color: #000;">
    New<span style="color: #fff;">&#8209;</span>Listing
</div>
like image 3
John Washam Avatar answered Nov 12 '22 07:11

John Washam