Html 电子邮件:用 "no-wrap" 或 "inline-block" 将一些单词放在一起?
Html email: hold some words together with "no-wrap" or "inline-block"?
我想在html电子邮件中将一些词放在一起,这样它们之间就不会中断(使用不同的屏幕尺寸),只要尽可能 before/after.
我有 2 个选项,似乎都很好用:
<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>
哪个更好,我应该用哪个?
"Both seem to work well" - 但仅在您测试的电子邮件客户端中。
要注意的第一件事是在不同的电子邮件客户端之间保持一致性是很棘手的。
让 <span>
使用 display:inline-block
将无法在 Windows Outlook 桌面上工作。 Inline-block
甚至在某些电子邮件客户端(如 Telstra webmail)上根本不起作用。 White-space:nowrap
工作正常,但同样不适用于 Outlook。
前进的主要方法是使用不间断的 space,即
即便如此,如果没有足够的 space,一些客户,尤其是 Apple,也会破坏它。在这种情况下,
与 nowrap
结合使用可能会起作用。但是,如果确实没有足够的 space,手机会倾向于缩小文本以使其适合但不可读。所以,最好不要强求,单独使用
即可。即便如此,如果线路变得太长,一些客户端如果不能打破它就会变得不可读(尤其是 Gmail 应用程序)。
谢谢Nathan,详细的解答!
我之前尝试过
但后来切换到 css 方法并忘记了不间断的 space.
我在流畅的-table-设计中使用它们,&nbps;
唯一的缺点是即使必要也不会打断文字,但增加了宽度单元格而不是(布局将中断)。解决方法可能是在里面放一个 <wbr>
,但它同样不适用于 Windows 10 Mail 和 Outlook。
我真的很讨厌微软这么冷漠的开发者!
对于 html-email Outlook 是一个挑战,但真正的噩梦是 Windows 10 Mail 桌面应用程序。
也许你可以看看我的另外两个问题:
How to stop Windows 10 Mail to cut 1px from the right side of each image?
再次感谢您的指导!
我想在html电子邮件中将一些词放在一起,这样它们之间就不会中断(使用不同的屏幕尺寸),只要尽可能 before/after.
我有 2 个选项,似乎都很好用:
<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>
哪个更好,我应该用哪个?
"Both seem to work well" - 但仅在您测试的电子邮件客户端中。
要注意的第一件事是在不同的电子邮件客户端之间保持一致性是很棘手的。
让 <span>
使用 display:inline-block
将无法在 Windows Outlook 桌面上工作。 Inline-block
甚至在某些电子邮件客户端(如 Telstra webmail)上根本不起作用。 White-space:nowrap
工作正常,但同样不适用于 Outlook。
前进的主要方法是使用不间断的 space,即
即便如此,如果没有足够的 space,一些客户,尤其是 Apple,也会破坏它。在这种情况下,
与 nowrap
结合使用可能会起作用。但是,如果确实没有足够的 space,手机会倾向于缩小文本以使其适合但不可读。所以,最好不要强求,单独使用
即可。即便如此,如果线路变得太长,一些客户端如果不能打破它就会变得不可读(尤其是 Gmail 应用程序)。
谢谢Nathan,详细的解答!
我之前尝试过
但后来切换到 css 方法并忘记了不间断的 space.
我在流畅的-table-设计中使用它们,&nbps;
唯一的缺点是即使必要也不会打断文字,但增加了宽度单元格而不是(布局将中断)。解决方法可能是在里面放一个 <wbr>
,但它同样不适用于 Windows 10 Mail 和 Outlook。
我真的很讨厌微软这么冷漠的开发者! 对于 html-email Outlook 是一个挑战,但真正的噩梦是 Windows 10 Mail 桌面应用程序。
也许你可以看看我的另外两个问题:
How to stop Windows 10 Mail to cut 1px from the right side of each image?
再次感谢您的指导!