CODEWITHSUNDEEP
whitespacehtml-emailoutlook-2007outlook-2010typography
SneakyOne
SneakyOne

Reputation: 71

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>

Upvotes: 6

Views: 15269

Answers (5)

Graham Harris
Graham Harris

Reputation: 379

I have been working on a similar problem except in Outlook 2016 and white space (spaces), and the solution I found that worked for me is using &nbsp; html character.

Upvotes: 0

John Washam
John Washam

Reputation: 4103

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>

Upvotes: 3

Annett
Annett

Reputation: 71

How about non-breaking hyphen &#8209;

Upvotes: 7

Rudolfs
Rudolfs

Reputation: 7

You might want to try adding width to this, if possible. Then it is not breaking.

Upvotes: -1

Krazer
Krazer

Reputation: 481

Use the <nobr> tag.

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

Upvotes: 4

Related Questions