如何限制 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<td style="height: 100px; overflow: hidden;">...</td><td style="height: 100px; overflow: scroll;">...</td>您可以使用 min-height 和 max-height 属性来定义表格单元格的绝对高度。 请记住，Outlook 中对这些的支持是有限的，并且可能无法像您期望的那样工作。
您可以使用嵌套表格。将内容放置在具有固定高度的嵌套表格内，以将内容限制在该高度内。 条件注释：使用 Microsoft Outlook 条件注释来应用专门针对 Outlook 的样式。
您还可以使用 Outlook 的条件注释将样式应用到电子邮件。像这样：
<!--[if mso]>
<td style="height: 100px;">
<![endif]-->
您可以用图像替换内容，这意味着如果内容不是动态的，您可以在表格单元格内放置图像来表示内容，因为图像不会扩展单元格高度。
请记住，Outlook 的渲染引擎可能与 Web 浏览器有很大不同，而且众所周知，它的 CSS 支持有限。跨不同版本的 Outlook 进行测试对于确保兼容性至关重要。此外，您可以使用 Litmus 或 Email on Acid 等工具来预览电子邮件在各种电子邮件客户端（包括不同版本的 Outlook）中的外观。