-webkit-line-clamp css无法添加电子邮件模板。如何在电子邮件模板中添加此属性？

Question

-webkit-line-clamp css无法添加电子邮件模板。如何在电子邮件模板中添加此属性

我已经制作了一个视频，我添加了我需要的css属性来检查元素，然后我想要的结果将被显示出来，然后你就可以理解我的意思了。检查此链接以获取视频video

Answer 1

似乎你不能在一封电子邮件中拥有这个功能。

下面是支持CSS的电子邮件客户端的完整列表和兼容性的两个来源。我在任何地方都找不到-webkit-line-clamp或line-clamp。

在这里您可以看到所有有效的CSS for HTML电子邮件https://caniuse.email/

编辑：

也在这里https://elasticemail.com/supported-css/

编辑2:

也许您可以结合使用overflow: hidden和gradient来实现类似的功能。这是没有理由不起作用的；

​

.text-truncate{
  width: 300px; 
  height: 200px;
  overflow: hidden;
}

.text-truncate p {
  text-align: justify;
}

.text-truncate:after {
  content: '';
  display: block;
  position: absolute;
  top: 110px; /* Extra 10px */
  height: 100px;
  width: inherit;
  background-image: linear-gradient( transparent 30%,  white 70%);
}

<div class="text-truncate">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius imperdiet dui, nec dictum ante viverra eget. Aenean lobortis bibendum mi eget pulvinar. Mauris eu turpis ipsum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris nec dolor tempor, aliquam est non, mollis augue. Fusce consequat enim arcu, vitae vulputate metus faucibus ac. Sed nec purus eget quam vulputate fringilla. Vestibulum nec metus est. Nam felis mauris, tincidunt vitae arcu non, vulputate luctus lacus. Pellentesque eget ultricies velit. Duis vehicula, velit eget maximus feugiat, lorem libero egestas turpis, eu ullamcorper nisl neque eget dolor.

Quisque quam orci, scelerisque mollis urna eu, suscipit tristique nunc. Phasellus sit amet sagittis mauris. Cras faucibus auctor quam, nec sollicitudin tellus volutpat id. In sed condimentum massa. Ut eleifend velit purus, et tincidunt dui ornare ac. Aenean finibus enim sit amet leo dignissim, sit amet egestas nibh iaculis. Nam sed lacinia diam, accumsan hendrerit tellus. Suspendisse maximus lobortis ligula quis finibus. Morbi eu libero in velit pellentesque convallis at bibendum lectus. Integer scelerisque, turpis sed sodales sagittis, dui augue cursus sem, ut bibendum tellus odio in leo.
</p>
</div>
<a href="#">Read More</a>

​