如何在内联CSS中换行或不换行？

Question

I am designing an HTML email for a company. I'm having a problem with the footer at the bottom. Currently, it looks like this:

I love it!

When it's resized a lot, it looks like this:

Wonderful! I DO want the footer to break onto 3 lines.

However, when I resize the window halfway, it looks like this:

What CSS code can I use to make the footer to either break ALL lines, or none? It needs to ALWAYS look like either this:

or this:

But NEVER this:

and NEVER this:

I tried numerous combinations of white-space: nowrap; to no avail. When ANY lines break, they need to ALL break at the same time. Maybe this could be accomplished with a <table> ?

Thank you for your help. The CSS needs to be inline and without media queries. JavaScript support for HTML email is very limited and non-reliable, therefore, I wish to do without it.

A JSFIDDLE for editing can be found here.

Answer 1

The layout which you are trying is possible using media queries or javascript. but most of the email templates doesn't support both solutions.

So, as I see, you have two options:

• it will be better if you always keep the footer items independent to each row ie add br tags between the nav tags.

or

• Create different email templates based on the resolution.

Personal suggestion: I would have gone with the first option.

Answer 2

<nav style="display:inline; white-space:nowrap;"> 
<a moz-do-not-send="true" style="text-decoration:none; word-break:break-all; color:white;" href="tel:1234567890">
(123) 456-7890
</a>
</nav>

Use

word-break:break-all;

Jsfiddle

http://jsfiddle.net/f1uuwexy/8/

Answer 3

You can do this using only html:

<div>
www.hazardmoving.com<br />
Patrickhazard@yahoo.com<br />
(123) 456 7890<br /></div>

You seem to try pushing css beyond its limits

If you feel comfortable including bootstrap you can try:

<link rel="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<div style="width: 600px; margin: 60px auto; text-align: center;">
<div class="col-md-4">www.hazardmoving.com</div>
<div class="col-md-4">Patrickhazard@yahoo.com</div>
<div class="col-md-4">(123) 456 7890</div>
</div>

That should do the work. Check my pen:

http://codepen.io/anon/pen/EajwXp