Newletter - тизер с фиксированной высотой

Question

Я разрабатываю шаблон бюллетеня для использования в электронной почте, и я хотел бы иметь строку таблицы/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> 

с таблицами и дивами:

<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 не соблюдается. Есть ли способ получить желаемый результат?

Answer 1

Пробег: table-layout:fixed;. это заставит таблицу иметь приоритет над контентом.

Не уверен, поддерживается ли оно на 100% по электронной почте, поэтому дайте мне знать, как вы его тестируете.