如何限制 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>
我尝试了类，指定类中的高度和内联样式。
我还尝试设置表格元素的高度。
<table width="800" border="0" cellspasing="0" cellpadding="0" style="table-layout: fixed; margin: 0; padding: 0; border-collapse: collapse; ">
<tr>
<td style="position: relative; max-height: 157px; height: 157px; overflow-y: hidden;">
<div style="position: absolute; display: block; max-height: 157px; height: 157px; overflow-y: hidden;">
</div>
</td>
</tr>
</table>
您可以尝试使用以下方法来限制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）中的外观。
表格的设计可以扩展到适合内容所需的高度。这就是为什么要限制其他一切，你需要 div。
对于 Outlook，您可以使用 VML。然而，它确实将该部分更改为图像，因此您会失去某些功能，例如复制文本的能力或可访问性（屏幕阅读器将无法阅读文本）。
这已在 Outlook 桌面版和 Gmail 网络邮件中进行了测试：
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" style="height:100px;width:200px;" stroke="false" fill="true" fillcolor="#ff0000" alt="" role="presentation">
<w:anchorlock/>
<![endif]-->
<div style="overflow-y: hidden;max-height: 100px;">
<p>Happy Friday! Have you ever wanted to strike up a convo with a robot? Well, now you can: This week, Figure AI implemented OpenAI’s tech into its Figure 01 robot. In the same way that ChatGPT can now speak aloud, this humanoid robot can too…while performing physical actions like picking up trash and putting away dishes (no, seriously). While it’s not yet commercially available, I’m predicting a multitasking, chatty robot on every holiday gift guide in 2025. 🙃 </p>
</div>
<!--[if mso]>
</v:rect>
<![endif]-->