Preheader text in HTML email

Question

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. It doesn't happen in Gmail though.

<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

Possible duplicate of [Java: How to unescape HTML character entities in Java?](https://stackoverflow.com/questions/994331/java-how-to-unescape-html-character-entities-in-java) — Syfer, Aug 22 '17 at 09:38

score 7 · Answer 1 · answered Aug 22 '17 at 08:29

For best results across environments, you'll be better off inlining the 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>

score 2 · Answer 2 · answered Jul 06 '18 at 21:55

I figure MailChimp has surely put a lot of energy into this dumb problem. 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]-->

score 0 · Answer 3 · answered Dec 21 '18 at 12:40

0

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.

answered Dec 21 '18 at 12:40

Maggie Rose

1
1
1

Preheader text in HTML email

3 Answers3