电子邮件的两行文本溢出省略号答案

【问题标题】：Text overflow ellipsis on two lines for email电子邮件的两行文本溢出省略号
【发布时间】：2021-11-19 00:29:16
【问题描述】：

是否有另一种方法可以在不使用 webkit-line-clamp 的情况下夹住文本？我将它用于电子邮件，所以不要使用它很重要。

这是我当前的代码。

<style>
  h2 {
    line-height:1.5rem;
    max-height:3rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
<h2>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.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.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.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.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.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>

问题是它没有显示......当它溢出时。 JS 似乎是解决这个问题的一种可能方法，但它是用于电子邮件的，所以我不能使用它（我已经尝试过，但它不起作用，参考：Is JavaScript supported in an email message?）

【问题讨论】：

标签： html css email templates webkit

【解决方案1】：

您缺少 css 的一个重要属性 white-space:nowrap

空格序列将折叠成一个空格。文本永远不会换行到下一行。文本在同一行继续，直到遇到
标记

这样你的代码就会变成

<style>
  h2 {
    line-height: 1.5rem;
    max-height: 3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>
<h2>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.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.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.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.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.Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h2>

【讨论】：

这仅适用于 1 行。我需要2个

【解决方案2】：

您不能在 EMAIL HTML 模板中限制文本署名，只能通过 CSS 使用与您使用的代码和 white-space: nowrap 相同的代码将文本限制为一行。此attribute has 90.9% 电子邮件客户端的支持。

<style>
  h2 {
    line-height:1.5rem;
    max-height:3rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
</style>

但如果您有机会手动编辑文本或从 API 或 BackOffice 获取更短的源文本，在这种情况下，这将是比通过 CSS 控制更好的选择。

【讨论】：