Question

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

我制作了一个视频，在其中添加了我所需的css属性来检查元素，然后将显示我想要的结果，然后您可以理解我的意思了。检查此链接以获取视频video

Answer 1

似乎您无法在电子邮件中拥有该功能。

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

在这里您可以看到 HTML 电子邮件https://caniuse.email/

的所有有效 CSS

已编辑

：

也在这里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>

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

1 个答案: