Html 电子邮件：将一些单词与“no-wrap”或“inline-block”放在一起？

Question

我想在 html 电子邮件中将一些单词放在一起，以便它们之间没有中断（使用不同的屏幕尺寸），尽可能长，就在之前/之后。

我有两个选择，似乎都效果很好：

<p>Lorem ipsum <span style="white-space:nowrap">words without a break</span> biberium.</p>
<p>Lorem ipsum <span style="display:inline-block">words without a break</span> biberium.</p>

哪个更好，我应该使用哪一个？

Answer 1

“两者似乎都运行良好” - 但仅限于您测试的电子邮件客户端。

首先要注意的是，在不同的电子邮件客户端之间保持一致性是很棘手的。

<span>在display:inline-blockWindows Outlook 桌面上无法使用。Inline-block甚至在某些电子邮件客户端（例如 Telstra 网络邮件）上根本不起作用。White-space:nowrap工作正常，但在 Outlook 上又不行。

前进的主要方法是使用不间断空格，即 

即使这样，一些客户，尤其是苹果公司，如果没有足够的空间，也会破坏它。在这种情况下， 结合使用nowrap可能会起作用。但是，如果确实没有足够的空间，手机往往会缩小文本以使其适合但无法阅读。所以，最好不要强求，单独使用即可 。即便如此，如果该行变得太长，某些客户端如果无法打破它，就会变得无法读取（尤其是 Gmail 应用程序）。