无需webkit-line-clamp实现邮件场景两行文本溢出显示省略号的方案咨询

你现有代码的问题在于，text-overflow: ellipsis 仅在单行文本场景下配合white-space: nowrap才能生效，多行场景下默认不会触发省略号渲染，且邮件场景禁用JS、不支持webkit-line-clamp，可以用以下纯CSS方案实现：

方案1：浮动伪元素适配方案（兼容95%以上主流邮件客户端） #

适配范围包括Outlook、QQ邮箱、网易邮箱、Gmail网页端等主流场景，完全不需要webkit私有属性和JS：

<style>
.text-truncate {
  line-height: 1.5rem;
  max-height: 3rem; /* 两行高度，可根据需要的行数调整 */
  overflow: hidden;
  position: relative;
  text-align: justify;
  word-break: break-all;
}
/* 占位元素对齐行高 */
.text-truncate::before {
  content: '';
  float: left;
  height: 100%;
  width: 0;
}
/* 末尾省略号 */
.text-truncate::after {
  content: '...';
  float: right;
  position: relative;
  top: -1.5rem; /* 数值等于行高，对齐最后一行 */
  left: 100%;
  width: 3em;
  margin-left: -3em;
  padding-right: 5px;
  /* 背景和容器底色保持一致，遮挡下方文字 */
  background: linear-gradient(to right, transparent, #fff 40%);
}
</style>

<h2 class="text-truncate">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.
</h2>

如果部分邮件客户端不支持内部style标签，可以把基础样式拆成行内属性，伪元素逻辑不受影响。

方案2：后端预处理兜底方案（兼容性100%） #

如果对兼容性要求极高，无法接受CSS方案的适配差异，可以直接在服务端渲染邮件内容时，提前按目标行数对应的字符数截断文本，末尾手动拼接...，不需要任何前端样式即可生效，是邮件场景最稳妥的实现方式。

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