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

Question

-webkit-line-clamp css not able to add in email template. How can add this property in email template

I have made one video where i have added my needed property of css to inspect element then my desired result will be show then you can understand what i mean. Check this link for video video

Answer 1

It seems that you cannot have that functionality in an email.

Below are two sources with full lists and compatibility of email clients supporting CSS . I could not find -webkit-line-clamp or line-clamp anywhere.

Here you can see all valid CSS for HTML emails https://caniuse.email/

EDITED:

Also here https://elasticemail.com/supported-css/

EDITED 2:

Maybe you could achieve something like that using overflow: hidden together with a gradient . There is no reason that would not work;

 .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>