电子邮件 - td 中隐藏的垂直溢出

Question

如何确保我的 td 不会垂直拉伸以适合内容，而是上限为最大高度并隐藏溢出的文本？

我正在使用 Inky 模板语言，但我会接受一个纯粹的基于 HTML 的解决方案？

我的目标是确保用户内容限制在为其保留的区域内。在下图中，您可以看到描述部分在垂直方向上拉伸过多的示例

目标是尽可能模仿我网站上的行为（我绝对不需要带有 ... 的省略号，只需隐藏超过 60px 高度的溢出即可够了）

我当前与此部分相关的 Inky 代码，content 是图像下方的底部部分

<row>
    <columns class="content">
        <row height="60" valign="middle">
            <columns class="position-column" valign="middle" height="60">
                <center>
                    <p class="position text-center" style="margin-bottom: 0;">
                        <%= model.job_description %>
                    </p>
                </center>
            </columns>
        </row>

inky<->html 翻译后的完整渲染代码可用 here

Answer 1

我认为这样做的唯一方法是固定高度并将 overflow:hidden 添加到 p 标签。

但是 Outlook 不支持溢出，所以这对这里没有帮助。

电子邮件 - td 中隐藏的垂直溢出

Email - hidden vertical overflow in td

css

html-email

zurb-foundation

inky