html - 如何在内联 CSS 中中断所有行或不中断行？

Question

我正在为一家公司设计 HTML 电子邮件。我在底部的页脚有问题。目前，它看起来像这样:

我喜欢它!

当它的大小调整很多时，它看起来像这样:

太棒了!我确实希望页脚分成 3 行。

但是，当我中途调整窗口大小时，它看起来像这样:

我可以使用什么 CSS 代码来使页脚分隔所有行，或者不分隔行？它需要始终看起来像这样:

或者这个:

但绝不是这样的:

永远不要这样:

我尝试了多种 white-space: nowrap; 的组合无济于事。当任何线路中断时，它们需要同时中断。也许这可以通过 <table> 来完成？

感谢您的帮助。 CSS 需要内联并且没有媒体查询。 JavaScript 对 HTML 电子邮件的支持非常有限且不可靠，因此，我希望没有它。

A JSFIDDLE for editing can be found here.

Answer 1

您正在尝试的布局可以使用媒体查询或 javascript。但大多数电子邮件模板都不支持这两种解决方案。

所以，据我所知，您有两个选择:

• 如果始终保持页脚元素独立于每一行会更好，即在 nav 标签之间添加 br 标签。

或

• 根据决议创建不同的电子邮件模板。

个人建议:我会选择第一个选项。