如何限制 Outlook 电子邮件的表格单元格的高度? 一切都在浏览器中显示良好。 但是,当电子邮件到达 Outlook(桌面应用程序)时,标识符“#some-text”的整个文本会增加单元格的长度。
演示:https://jsfiddle.net/ArtfulLee/zxg6msyt/
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"
xmlns:o="urn:schemas-microsoft-com:office:office" lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Template</title>
<style type="text/css">
table {
border-spacing: 0;
mso-cellspacing: 0;
mso-padding-alt: 0;
}
td {
padding: 0;
}
a {
text-decoration: none;
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
table {border-collapse: collapse !important;}
</style>
<![endif]-->
<!--[if (gte mso 9)|(IE)]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
</head>
<body style="Margin:0;padding:0;min-width:100%;background-color:#e5e5e5;">
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">
body {background-color: #e5e5e5!important;}
body, table, td, p, a {font-family: sans-serif, Arial, Helvetica!important;}
</style>
<![endif]-->
<center style="width: 100%;table-layout:fixed;background-color: #e5e5e5;padding-top: 40px;padding-bottom: 40px;">
<div style="max-width: 800px;background-color: #006c5e;">
<!-- <div
style="font-size: 0px;line-height: 1px;mso-line-height-rule:exactly;display: none;max-width: 0px;max-height: 0px;opacity: 0;overflow: hidden;mso-hide:all;">
Start
</div> -->
<!--[if (gte mso 9)|(IE)]>
<table width="800" align="center" border="0" cellspacing="0" cellpadding="0" role="presentation" style="color:#1C1E23;">
<tr>
<td>
<![endif]-->
<table align="center" border="0" cellspacing="0" cellpadding="0" role="presentation"
style="color:#111111; font-family: Arial, Helvetica, sans-serif; background-color: #006c5e; Margin:0; padding:0; width: 100%; max-width: 800px;">
<tr>
<td>
<!-- Main Message -->
<table width="100%" border="0" cellspacing="0" cellpadding="0" role="presentation"
style="Margin: 0; padding: 0; border-collapse: collapse;">
<tr>
<td style="padding: 40px 40px 40px 40px;">
<table width="100%" border="0" cellspacing="0" cellpadding="0"
style="Margin: 0; padding: 0; border-collapse: collapse;">
<tr>
<td>
<!-- header of list -->
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td
style="font-family: Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 700; line-height: 31.2px; color: #FFFFFF;word-break: break-word; padding: 24px 0 24px 0;">
Lorem ipsum dolor sit amet:
</td>
</tr>
</table>
<!-- End header of list -->
<!-- template -->
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td style="padding: 0 0 24px 0;">
<a href="#" style="text-decoration: none;">
<table width="100%" border="0" cellspacing="0"
cellpadding="0">
<tr>
<td style="background-color: #FFFFFF;">
<table width=" 100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td width="212"
style="max-width: 212px; padding: 12px 12px 12px 12px;">
<img width="212" height="157"
src="#"
alt="photo"
style="display: block; object-fit: cover;">
</td>
<td
style="vertical-align: top; padding: 12px 12px 12px 12px; text-decoration: none; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-style: normal; font-weight: 400;line-height: 140%; color: #333333; ">
<div
style="height: 157px; overflow-y: hidden;">
<p
style="Margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-style: normal; font-weight: 700; line-height: 28.8px; color: #006c5e;">
Lorem ipsum dolor sit amet.
</p>
<p id="some-text">Lorem ipsum dolor, sit amet
consectetur adipisicing
elit. Cupiditate accusantium
et voluptatibus ullam, fuga
optio beatae officia aliquam
aperiam in sint veritatis
dolorum error quae minima
iste. Explicabo dolorum
temporibus laudantium fugiat
ducimus reprehenderit
provident beatae dolorem,
repellat ad esse in cumque!
Quibusdam minus possimus
assumenda, iste ea dolore
veniam at ipsam iusto
molestias, veritatis
maiores? Iusto, tempore rem
perferendis deserunt quis
cum dolor quo sit omnis?
Eaque ea incidunt
voluptatibus nihil
architecto dolores rem
facilis omnis tempora ab
optio accusamus aperiam, cum
corporis dolorem beatae nemo
quidem tempore? Fugit
quisquam nobis vero quo
atque consequatur maxime,
sunt non, impedit quia
possimus magnam ab illo nemo
vitae ipsum. Eligendi at
ipsa id iste beatae. Quidem
nemo enim similique ex,
repellat omnis debitis nisi
ipsam fugit iusto incidunt
unde magnam, voluptate animi
veniam dolorum consectetur
doloribus sapiente eaque
eum. Cum quia facilis atque
earum perspiciatis aperiam
eos, alias et ullam
officiis?</p>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
<!-- End Template -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End Main message -->
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</div>
</center>
</body>
</html>
我尝试过使用类、指定类中的高度和内联样式。我还尝试设置表格元素的高度,但无济于事。 Outlook 有自己的生活)帮助我)))))
您可以尝试使用以下方法来限制outlook中表格单元格的高度。
#some-text
的元素上设置固定高度,并使用CSS属性overflow来隐藏或滚动多余的内容。<td style="height: 100px; overflow: hidden;">...</td>
<td style="height: 100px; overflow: scroll;">...</td>
您可以使用 min-height 和 max-height 属性来定义表格单元格的绝对高度。 请记住,Outlook 中对这些的支持是有限的,并且可能无法像您期望的那样工作。
您可以使用嵌套表格。将内容放置在具有固定高度的嵌套表格内,以将内容限制在该高度内。 条件注释:使用 Microsoft Outlook 条件注释来应用专门针对 Outlook 的样式。
`