如何制作多行溢出文本省略号，末尾有阅读更多链接？

Question

我有这个容器，我希望它被渲染成这样：

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla ac neque sed velit aliquet molestie. Duis ut
magna euismod, convallis tellus... Read More.

我已经试过了。它适用于文本，但关于链接，它显然只是显示在另一行上。此外，链接应该是文本的一部分，但如果我在段落元素内添加锚元素，它会隐藏它，因为现在它是文本的一部分。

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

<div class="container">
  <p class="text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac neque sed velit aliquet molestie. Duis ut magna euismod, convallis tellus non, molestie risus. Aenean lacinia nisl eget tincidunt bibendum.
  </p>
  <a href="#" class="read-more">Read More</a>
</div>