How does this email display part of its text selectively?

Question

I get a daily email newsletter, and I noticed that in the Android Gmail app, below the sender and the subject, where usually one sees the first line of the email, there is a brief description that is not visible in the body.

A poem about the shape of loneliness by Patricia Goedicke. View this email in your browser.

When opened the the body begins with

View this email in your browser.

In the web client the line is also not visible, However in the page source it appears in the following HTML:

<span class="m_2244559234681810125mcnPreviewText" style="display:none;font-size:0px;line-height:0px;max-height:0px;max-width:0px;opacity:0;overflow:hidden">A poem about the shape of loneliness by Patricia Goedicke.</span>

When the email is collapsed, it appears again. HTML:

<div class="iA g6" role="gridcell" tabindex="-1">A poem about the shape of loneliness by Patricia Goedicke. View this email in your browser</div>

Looking at the email on other clients (Thuderbird, Edison app for Android), the line does not appear.

My question is: how does this work in terms of SMTP? Is there a way to instruct part of an email not to be displayed, or to appear selectively?

Answer 1

The HTML <span> tag has CSS style that specifies:

style="display:none;font-size:0px;line-height:0px;max-height:0px;max-width:0px;opacity:0;overflow:hidden"

This means no display, font size 0, line height 0, text width 0, opacity 0 (transparent).

So every email client that obeys CSS (almost all of them today) will certainly not display this text.

You have tried it on many email clients, and I understand that some of them obeyed the CSS and some didn't, which is normal, as CSS support may vary.

Answer 2

harrymc's answer is essentially correct, but I thought I'd add more background. As detailed in this blog post, the email sender has taken advantage of the way Gmail uses CSS to create preview text that appears in the user's inbox, but isn't displayed in the email. The CSS contains .mcnPreviewText{ =09=09=09display:none (not sure what all those =09 s are about!), which tells the client to hide the preview. But when the email is collapsed, Gmail doesn't apply CSS, so your preview text is visible to tempt the user into opening. Here is a SO thread discussing the nuances of getting this to work with different clients.