0

我正在开发一个用于电子邮件的时事通讯模板,我希望有一个不能高于某个值的表格行/div,以便在文本太长时不显示文本。

到目前为止,我尝试了两种不同的方法: 仅使用表格:

<table border="0" cellpadding="0" cellspacing="0" class="teaser" style="table-layout:fixed; overflow:hidden; white-space: nowrap;letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; cursor: pointer; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="64" width="92" border="1" valign="top" align="left" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;">
<a href="#" target="blank" style="border:0px;text-decoration:none;color: #6f6f6f;">
<img src='testImage.jpg' alt='' style='border:0px' />
</a>
</td>
<td width="298" height="64" valign="top" style="color: #6f6f6f; border: #6f6f6f;">
<h1 style="font-family: arial; font-size: 12px; font-weight: bold; line-height: 15px; vertical-align: top; text-transform: uppercase; margin: 0px; padding: 0px;">
<a href="#" target="blank">
<span style="color: #6f6f6f; line-height: inherit; text-decoration: none; position: relative; letter-spacing: 0.03em; top: -2px; margin: 0px; padding: 0px; border: 0px;">
Quias alitatem <br />qui cullat
</span>
</a>
</h1>
<a href="#" target="blank" style="border:0px;text-decoration:none;">
<p class="normal-text no-overflow" style="font-size: 12px; line-height: 15px; overflow: hidden; margin: 4px 0px 0px;color: #6f6f6f">
WelIpsamus pe invenda quiatur? Quias alitatem qui cullat lique num et molor sitempo rionse. WelIpsamus pe invenda quiatur? Quias alitatem qui cullat lique num et molor sitempo rionse.
</p>
</a>
</td>
</tr>
</tbody>
</table>

使用表格和 div:

<table border="0" cellpadding="0" cellspacing="0" class="teaser" style="table-layout:fixed; overflow:hidden; white-space: nowrap;letter-spacing: -0.01em; border-collapse: collapse; font-family: arial; text-align: left; cursor: pointer; margin: 0px; padding: 0px; border: 0px;">
<tbody style="margin: 0px; padding: 0px; border: 0px;">
<tr>
<td class="w480 normal-text" height="64" width="92" border="1" valign="top" align="left" style="color: #6f6f6f; font-size: 12px; line-height: 15px; border: #6f6f6f;">
<img src='testImage.jpg' alt='' />
</td>
<td width="298" height="64" valign="top" style="color: #6f6f6f; border: #6f6f6f;">
<div style='height:64px; overflow:hidden;'>
<h1 style="font-family: arial; font-size: 12px; font-weight: bold; line-height: 15px; vertical-align: top; text-transform: uppercase; margin: 0px; padding: 0px;">
<span style="color: #6f6f6f; line-height: inherit; text-decoration: none; position: relative; letter-spacing: 0.03em; top: -2px; margin: 0px; padding: 0px; border: 0px;">
Quias alitatem <br />qui cullat
</span>
</h1>
<p class="normal-text no-overflow" style="font-size: 12px; line-height: 15px; margin: 4px 0px 0px;">
WelIpsamus pe invenda quiatur? Quias alitatem qui cullat lique num et molor sitempo rionse. WelIpsamus pe invenda quiatur? Quias alitatem qui cullat lique num et molor sitempo rionse.
</p>
</div>
</td>
</tr>
</tbody>
</table>

它们在任何浏览器的预览中都能很好地工作。但是当收到电子邮件时,行/div 的高度不被尊重。有什么方法可以得到想要的结果吗?

4

1 回答 1

0

试试table-layout:fixed;。它将强制表格优先于内容。

不确定电子邮件是否 100% 支持它,所以让我知道你是如何测试它的。

于 2013-06-18T19:13:18.720 回答