HTML电子邮件中的预标题文本
[英]Preheader text in HTML email
问题描述
I have added preheader text in my HTML template and it is working fine but when someone forward the newsletter from outlook, that texts are shown on the top. 
我在HTML模板中添加了预标题文本，并且工作正常，但是当有人从Outlook转发新闻通讯时，这些文本会显示在顶部。 It doesn't happen in Gmail though. 不过，这在Gmail中不会发生。
<style>
.preheader {
display:none !important;
visibility:hidden;
opacity:0;
color:transparent; height:0; width:0; }
</style>
</head>
<body>
<span class="preheader" style="display: none !important; visibility: hidden;
opacity: 0; color: transparent; height: 0; width: 0;">
We are offering a six-week Indonesian language course for adult learners.
</span>
Thanks! 谢谢！
Screenshot of how it looks when someone forward a newsletter 有人转发时事通讯的外观截图
3 个解决方案
解决方案1
5 2017-08-22 08:29:05
For best results across environments, you'll be better off inlining the CSS. 为了在整个环境中获得最佳结果，最好内联CSS。 I've always used this for preheaders. 我一直将此用于预标题。
<div style="display:none; font-size:1px; color:#e5e5e5; line-height:1px; font-family:Verdana, Helvetica, sans-serif; max-height:0px; max-width:0px; opacity:0; overflow:hidden; mso-hide:all;">
PREHEADER TEXT HERE
</div>
解决方案2
0 2018-07-06 21:55:19
I figure MailChimp has surely put a lot of energy into this dumb problem. 我认为MailChimp确实为这个愚蠢的问题投入了很多精力。 They use: 他们使用：
<!--[if !gte mso 9]>
<span style="display:none;
font-size:0px;
line-height:0px;
max-height:0px;
max-width:0px;
opacity:0;
overflow:hidden;
visibility:hidden;
mso-hide:all;">YOUR MESSAGE</span>
<!--<![endif]-->
解决方案3
0 2018-12-21 12:40:03
I tried the previous answers but on forward, the email still showed tiny text. 我尝试了以前的答案，但转发之后，电子邮件仍然显示很小的文本。 I ended up making the text the same color as the background and that's what finally worked for me. 我最终使文本与背景颜色相同，而这最终对我有用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.