如何打破内联 CSS 中的所有行或没有行？答案

【问题标题】：How can I break all lines or none in inline CSS?如何打破内联 CSS 中的所有行或没有行？
【发布时间】：2014-11-26 03:05:37
【问题描述】：

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

我喜欢它！

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

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

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

我可以使用哪些 CSS 代码使页脚中断所有行或不中断？它需要始终看起来像这样：

或者这个：

但永远不要这样：

永远不要这样：

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

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

A JSFIDDLE for editing can be found here.

【问题讨论】：

可能有一些巧妙的技巧可以做到这一点，但通常你依赖 CSS 来建立一个复杂的约束。这只是“超出其薪酬等级”。
通常这可以通过@media查询实现，但是支持有限：litmus.com/help/email-clients/media-query-support
@haxxton 同意，他可以使用display:none 媒体查询进行br，但为了电子邮件客户端支持，最好的办法是url<br>email<br>tel，以确保每个人都能获得格式OP想要。
只是一个建议，根据客户的显示分辨率有不同的电子邮件模板。

标签： html css html-email

【解决方案1】：

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

所以，如我所见，您有两种选择：

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

或

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

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

【讨论】：

这里是显示第一个选项的小提琴。 fiddle

【解决方案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/

【讨论】：

这做了两件不应该做的事情。它应该显示在一行或三行上，当两个小一行时。不是两个。
这不能回答我的问题。按照我问的方式。

【解决方案3】：

您可以只使用 html 来做到这一点：

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

您似乎试图将 css 推向极限

如果你觉得包含 bootstrap 感觉很舒服，你可以尝试：

<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

【讨论】：

这将永远不允许它在一行上。它永远是三个。
试用它的引导部分
这在电子邮件客户端中不起作用：-\ 只有非常基本的 inline CSS 得到广泛支持。
电子邮件的引导程序？？
我猜你有更好的说法