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

Question

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>

Decree

According to Campaign Monitor, white-space is only not supported in Outlook 2000/2003, so maybe you have found a bug! I also had to look up that ISBN out of curiosity: "Ideal Illusions: How the U.S. Government Co-opted Human Rights". :) – Cleland

Also, Outlook 2007/2010 use their respective version of Word to render e-mails. I'm not sure that was the case with previous versions. Perhaps, while "supported," Word's implementation of white-space support is more relaxed than in other clients (web or otherwise). Maybe you should open a Connect issue with Microsoft for a better answer -- it's a hard topic to research using a search engine. – Cleland

Hi Cory, thanks for your input. It is a devilish problem to research. My next stop will be Microsoft, definitely, but hopefully I can find a solution for the immediate problem. The only thing I can think of is to break the ISBN onto its own line, but that isn't the way the template was designed and I'm hoping to keep the design intact. – Decree

Please report back if you find a solution or workaround, I'd be interested in learning what you find. – Cleland

I edited to make the code more readable. I'm not sure of a solution though im afraid :/ – Sulfaguanidine

I haven't found an answer, and even worse, reporting issues to MS is nearly impossible. I'll keep searching, though, and if I do find out anything, I'll report back. Thanks for the help and the post tweaking. – Decree

I use the nonbreaking hyphen. For my emails I have code that 'folds' the css into the html, so I just added code in that process to replace '-' with '‑'. – Wreathe

Answer 1

How about non-breaking hyphen ‑

Sena

Answer 2

Use the <nobr> tag.

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

Tog

Interesting! The <NOBR> tag appears to be deprecated/not supported, but that's never stopped me in the past. Alas, my line still breaks on the hyphen in Outlook 07/10. Good thought, though. – Decree

Have you tried using a non-breaking hyphen character (‑)? – Tog

Non-breaking hyphen works, but I am looking for a solution that doesn't rely on them. I don't think there's a way around using them, though. Kind of unfortunate, I think. Thanks for your ideas! – Decree

Answer 3

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>

Collimate

withWow, that's clever. For some reason that I don't remember, I couldn't use non-breaking hyphens for this particular assignment. On a slightly different note, I recently tried zero-width spaces (​) around hyphens to control word breaks. It passed cross-browser Acid testing, but my ESP actually stripped them out, leaving the dreaded '?' in its place. – Decree

You can use non breaking spaces,   works in Outlook 2013 too. Non breaking hyphens are only required when you actually want to have hyphens. – Aragon

Answer 4

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   html character.

Compander

Answer 5

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

Rone

Hi Rudolfs, could you explain what you mean? – Decree