Geek asks and answers

Style line height for HTML emails in Outlook Web App

I worked on HTML email and tried everything to display correctly line-heightin Microsoft Outlook Web App. I tried !importantin my inline styles, using .ExternalClass * {line-height: 100%}in the document title, wrapping text in a range with a style inline line-height, having line-heightin the parent tdas well span.

If someone can help, it will be very helpful!

Below is an example of the area of ​​my current text in td.

<td pardot-region="articleContent1a" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; font-family: sans-serif; font-size: 14px; line-height: 25px; text-align: left; color: #7f7f7f;" valign="top">
  Yesterday, Krissy posted about six things you should consider when performing a high-level user experience (UX) audit of a website. While UX is a crucial component of measuring a website’s success, it’s only part of the equation.</td>

I also tried adding tso mso-line-height-rule: namely.

+3
source share
3 answers

- (, ). td , . , , , "span" "p".

Outlook, :

table {
font-size:1px;
mso-line-height-alt:0;
line-height:0;
mso-margin-top-alt:1px;
}

; ... .

+2

, , . jsfiddle ?

, CSS 100%; 112%:

.ExternalClass * { line-height:112%; }

Outlook Webmail , , , -.

:

  • <td>, (, <span>).

  • , mso-line-height-rule:exactly, - ​​ mso-line-height:

    <td style="font-size:1em;mso-line-height-rule:exactly;line-height:1.3em;">

  • , / , .

.

+2

CSS , line-height Outlook.com - p.

+1

More articles:


All Articles