How to style the preview text in emails
- email dev
- outlook
- preview text
Fri, September 17, 2021
Days working on emails are always sources of both frustration and learning (when you must ensure Outlook Desktop support)
One of those days: trying to fix the preview text. you know, those 1-2-3 lines displayed before you actually open the email.
Gmail in browser:

Outlook Desktop:

The issue started because Outlook desktop was actually displaying as preview text the URL of the logo image π€¦
And even though itβs only happening in Outlook Desktop, Outlook desktop is used by a really significant of users, no way to ignore them π
After many tries and investigations, hereβs a way to get it working accross all email clients:
<!-- Preview Text -->
<div
style="display:none; font-size:1px; color:#333333; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden;"
>
Your preview text
</div>
<!-- Insert ‌ hack after hidden preview text -->
<div
style="font-size: 0px; line-height:0px; display: none; max-height: 0px; overflow: hidden;"
>
β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β
β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β
β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β β
β β β β β β β β β β β β β β β β β β β β β β β β β
</div>
<div style="font-size: 0px; line-height:0px; color: #ffffff; display: none;">
</div>
<!-- end preview text -->
Yes β¦ itβs that simple, and that verbose π