GMAIL中的“消息预览”显示替换文本

Question

我创建了一个HTML电子邮件模板，它在大多数电子邮件客户端中都可以正常工作。如预期的那样，我在不同元素中具有alt和title属性。

我的问题是GMAIL正在读取那些alt或title属性，并将其内容包含在电子邮件预览部分中。

我尝试遵循这些指示（此处），但是使用纯文本电子邮件没有解决我的问题。

供参考，这就是我所说的“电子邮件预览”（出于隐私原因，我无法截图我的电子邮件）：

对此有何想法？

- Bruno Monteiro

---

谢谢@Quentin，这是一篇非常好的文章！我同意拥有一个好的alt文本会有所帮助，但在我看来，好的alt文本并不一定意味着有一个好的预览文本。 - Bruno Monteiro

Answer 1

您需要的是称为预标题或预览文本。这是一个隐藏的文本，位于

标签之后。

<div style="display:none;font-size:1px;color:#{color};line-height:1px;font-family:{font};max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;">
    Pre header/Preview text here&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;&nbsp;&#847;
</div>

注意事项：

• 如果您想保留空白，请删除文本“此处预标题/预览文本”。
• 如果要保留预标题，请按原样使用上述代码。
• 根据您的需要更改颜色和字体系列。(文本颜色应与电子邮件背景颜色相同)。
• 如果alt文本仍然显示，请将
  内容附加到 ͏，直到获得您想要的结果。

以下是基于不同设备的预览文本字符计数。

来源

- Syfer

---

谢谢，这能够完成任务。我唯一的意见是我们应该使用<td>而不是<div>，因为Outlook（桌面应用程序）无法很好地处理<div>。 - Bruno Monteiro

只有在您想要显示div时才需要使用。在这种情况下，div会被CSS隐藏。此外，如果您想要改变电子邮件的混合/弹性编码技术，请查看使用div的方法。 - Syfer

没错，Outlook完全忽略div上的样式，并保留在td（或table）上的样式。 - Syfer

我只想补充一点，如果你确实使用 ...，那么这可能会被视为垃圾邮件的标志，因此应谨慎使用。这是来自一位与SpamAssassin合作过的人的建议，这不是一个模糊的“可能”，而是一个真实的事情。 - Nathan

明白了，Nathan。虽然我还没有遇到过这种情况，但如果发生了，我会留意的。 - Syfer