Skip to content

Instantly share code, notes, and snippets.

@kbav

kbav/gist:4126337

Created November 21, 2012 17:36
Show Gist options
  • Save kbav/4126337 to your computer and use it in GitHub Desktop.
Save kbav/4126337 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Email Hidden Preheader
Raw
gistfile1.html
<style>
/* ... */
/*--- Preheader declaration in style block in addition to inline for Outlook */
.preheader { display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0; }
</style>
</head>
<body>
<!-- PRE-HEADER TEXT -->
<span class="preheader" style="display: none !important; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;">Preheader text shows up in GMail, iOS, Mail.app, &amp; more: 75 text char limit</span>
...
@iamwerby
Copy link

iamwerby commented May 9, 2019

Here's the one I use, works perfectly:

<span class="preheader" style="color: #f3f3f3; display: none !important; font-size: 1px; line-height: 1px; max-height: 0px; max-width: 0px; mso-hide: all !important; opacity: 0; overflow: hidden; visibility: hidden;">Preheader text</span>

@maitrungduc1410
Copy link

This works for me, prepend this to body before sending out email:

<!-- Visually Hidden Preheader Text : BEGIN -->
        <div style="display:none;font-size:1px;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;mso-hide:all;font-family: sans-serif;">
            Some preview Text
        </div>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment