Html email: hold some words together with "no-wrap" or "inline-block"?

Question

i'd like to keep some words together in a html email, so that there is no break between them (using different screen sizes), as long as possible, just before/after.

I've 2 options, both seem to work well:

<p>Lorem ipsum <span style="white-space:nowrap">words without a break</span> biberium.</p>
<p>Lorem ipsum <span style="display:inline-block">words without a break</span> biberium.</p>

Which is the better, which one should i use?

Answer 1

"Both seem to work well" -but only in the email client you tested.

The number one thing to note is that getting consistency across different email clients is tricky.

Having a <span> use display:inline-block will not work on Windows Outlook desktop. Inline-block doesn't even work at all on some email clients such as Telstra webmail. White-space:nowrap works okay, but again not on Outlooks.

The main way forward is to use a non-breaking space, i.e.  

Even then, some clients, notable Apple, will break it if there's not enough space. In that case,   in combination with nowrap may work. But, if there truly is not enough space, mobiles will tend to shrink the text so it fits but is unreadable. Therefore, it's best not to force the issue, and to just use   alone. Even so, if the line becomes too long, some clients will become unreadable if they can't break it (especially Gmail apps).

Answer 2

Thank You Nathan, for the detailed answer! I've tried   earlier but then switched to the css-methods and forgot the non-breaking space.

I use them in a fluid-table-design, and the only downside of the &nbps; is that it won't break the words even if necessary, but increase the width of the cell instead (and the layout will break). Workaround could be to put a <wbr> inside, but again it won't work with Windows 10 Mail and Outlook.

I really hate Microsoft to be such a nonchalant developer! For a html-email Outlook is a challenge, but the real nightmare is the Windows 10 Mail desktop app.

Maybe You can check out my 2 other problems:
How to stop Windows 10 Mail to cut 1px from the right side of each image?
How to stop Windows 10 Mail app to create links/contacts from numbers?

Thank You again for the guidance!