-webkit-line-clamp css 無法添加到電子郵件模板中。 如何在電子郵件模板中添加此屬性？

Question

-webkit-line-clamp css 無法添加到電子郵件模板中。 如何在電子郵件模板中添加此屬性

我制作了一個視頻，其中我添加了我需要的 css 屬性來檢查元素，然后將顯示我想要的結果，然后您就可以理解我的意思了。 檢查此鏈接以獲取視頻視頻

Answer 1

您似乎無法在電子郵件中使用該功能。

以下是支持CSS的電子郵件客戶端的完整列表和兼容性的兩個來源。 我在任何地方都找不到-webkit-line-clamp或line-clamp 。

在這里您可以看到HTML電子郵件的所有有效CSS 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>