How can I break all lines or none in inline 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 i.e 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.