Question

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

enter image description here

我喜欢它！

当它重新调整大小时，它看起来像这样：

enter image description here

奇妙！我想让页脚突破3行。

然而，当我中途调整窗口大小时，它看起来像这样：

enter image description here

我可以使用什么CSS代码来使页脚断开所有行，或者没有？它总是看起来像这样：

enter image description here

或者这个：

enter image description here

但绝不是这样：

enter image description here

并且从未这样：

enter image description here

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

来完成

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

A JSFIDDLE for editing can be found here.

Answer 1

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

所以，正如我所见，你有两个选择：

如果您始终将页脚项目保持独立于每一行，即在br标记之间添加nav标记，那将会更好。

或

根据分辨率创建不同的电子邮件模板。

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

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>

使用

word-break:break-all;

<强>的jsfiddle

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

Answer 3

您只能使用html执行此操作：

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

你似乎试图将css推到极限之外

如果您觉得包括引导程序感觉舒服，可以尝试：

<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>

那应该做的工作。检查我的笔：

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

如何在内联CSS中断掉所有行？

3 个答案:

或