如何实现多行文本溢出省略并在末尾添加「查看更多」链接？

期望渲染效果：

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

我尝试了以下代码，虽然多行文本溢出省略生效了，但「查看更多」链接会单独换行；如果把锚点元素放进段落里，链接会被当成文本的一部分被隐藏。

原尝试代码 #

CSS

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

HTML

<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">查看更多</a>
</div>

解决方案 #

通过相对定位+绝对定位的组合，把「查看更多」链接固定在文本溢出的位置，同时避免链接覆盖文本：

修改后的CSS

.container {
  position: relative;
  width: 300px; /* 根据实际需求调整容器宽度 */
  line-height: 1.5; /* 行高需和line-clamp配合，保证排版一致 */
}

.text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 80px; /* 留出「查看更多」链接的宽度，避免文本被覆盖 */
  margin: 0; /* 清除段落默认外边距，避免容器高度异常 */
}

.read-more {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff; /* 背景色和容器背景一致，确保能盖住溢出省略的部分 */
  padding-left: 8px; /* 给省略号和链接之间加一点间距 */
}

说明

1. 给容器设置position: relative，让链接的绝对定位基于容器范围
2. 文本的padding-right预留出链接的宽度，防止最后一行文本被链接遮挡
3. 链接用绝对定位固定在容器右下角，背景色和容器一致，让它看起来像是紧跟在省略号之后

内容的提问来源于stack exchange，提问作者charbel sfeir