HTML邮件模板Gmail安卓端标题溢出截断问题求解

针对安卓Gmail字体自动放大导致标题截断的可落地解决方案 #

以下方案均不会改动你现有左图右文的布局，对其他客户端兼容性影响极小：

• 禁用客户端强制字体调整：在<body>标签的行内样式中追加-webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; text-size-adjust: 100% !important;，该属性会直接阻止安卓Gmail自动放大页面字体，是该类问题最优先尝试的方案。
• 调整字体大小避开Gmail放大阈值：安卓Gmail通常会强制放大14px及以下的字体，你可以将移动端媒体查询中.listing-title的字体大小从14px调整为15px，对应行高调整为19px，高度调整为38px，刚好容纳两行标题，高于阈值的字体不会被Gmail强制放大，自然不会出现溢出截断问题。
• 替换固定高度为自适应高度：将.listing-title的固定height属性改为min-height，同时保留overflow: hidden，桌面端设置min-height: 42px，移动端设置min-height: 35px，如果出现字体放大的情况，容器会自动小幅撑开容纳内容，不会出现截断，正常渲染时高度和原有设计完全一致，不会影响其他客户端的显示效果。
• 修正嵌套链接的样式属性：你当前嵌套在<a>标签内的表格会导致部分版本Gmail的宽度计算异常，将标题外层<a>标签的行内display: block改为display: inline-block，同时追加width: 100%，可以避免文本容器宽度被异常压缩，减少换行溢出概率。

内容的提问来源于stack exchange，提问作者Julia De