Sendgrid动态模板发邮件时-webkit类CSS样式被移除如何解决

问题现象 #

使用Sendgrid动态模板发邮件时，给元素配置的多行文本截断样式-webkit-line-clamp: 4;、-webkit-box-orient: vertical;会被模板自动删除，最终收到的邮件里这两个样式不生效，长文本没法按预期截断成4行。
相关代码配置、浏览器端预期效果参考：

问题原因 #

Sendgrid在发信前会自动对模板内的CSS做清洗、兼容性处理，会默认筛掉它判定为非标准、兼容性差的webkit私有前缀属性，其中-webkit-box-orient是各类CSS压缩、清洗工具的高频误删属性，基本只要走自动CSS处理流程就容易被删掉。

解决方法 #

• 加保留注释绕过过滤
  在两个需要保留的属性前后加带!标记的重要注释，CSS清洗工具会识别这类注释为不可删除内容，跳过对应区域的属性检查，亲测可用，写法如下：

  <div style="
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    /*! do not remove */
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
  ">
    待截断的长文本内容
  </div>
  

• 插入空注释打断匹配规则
  如果上面的写法还是被过滤，可以在style属性里对应位置插入空的HTML注释，直接打断清洗工具的属性匹配逻辑，写法如下：

  <div style="display:-webkit-box;overflow:hidden;text-overflow:ellipsis;<!-- -->-webkit-box-orient:vertical;-webkit-line-clamp:4;<!-- -->">
    待截断的长文本内容
  </div>
  

• 稳妥降级方案
  注意-webkit-line-clamp本身是webkit内核私有属性，本来就没法在Outlook、部分旧版邮件客户端里生效，最稳妥的方式是提前在业务代码里处理好要展示的文本，按预估的展示长度截取后拼接省略号，再把处理完的文本传给动态模板，从根源上避开样式被过滤、多端兼容不一致的问题。

内容的提问来源于stack exchange，提问作者Raphael Oliveira