如何让Read more按钮与多行截断文本同行并替换省略号

核心思路 #

通过容器相对定位+按钮绝对定位，把按钮固定在文本最后一行的右侧；同时给文本预留按钮宽度的内边距，并用伪元素覆盖默认省略号，实现按钮替代省略号的效果。

代码实现 #

HTML结构调整

将文本和按钮放入同一容器，便于定位控制：

<div class="text-wrap">
  <p class="trunc-content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
  <button class="read-more">Read more</button>
</div>

CSS样式配置

.text-wrap {
  position: relative;
  width: 100%;
  max-width: 600px; /* 按需设置容器宽度 */
}

.trunc-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  padding-right: 85px; /* 预留按钮位置，根据按钮实际宽度调整 */
  margin: 0;
  line-height: 1.6; /* 统一行高，保证对齐 */
}

.read-more {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff; /* 背景色与容器背景一致，覆盖下方文本 */
  border: none;
  color: #2563eb;
  cursor: pointer;
  padding: 0 5px;
  font-size: inherit;
}

/* 覆盖默认省略号 */
.trunc-content::after {
  content: '';
  position: absolute;
  right: 85px; /* 与文本padding-right对应，精准覆盖省略号 */
  bottom: 0;
  width: 25px;
  height: 1.6em; /* 匹配文本行高 */
  background: #fff; /* 与容器背景色一致 */
}

细节调整说明 #

• 根据按钮实际宽度修改padding-right和伪元素的right值，确保按钮完全嵌入最后一行且不遮挡有效文本。
• 切换显示/隐藏完整文本时，只需给.trunc-content移除-webkit-line-clamp等截断样式，同时隐藏按钮即可。
• 若文本背景非纯色，可删除伪元素，改用text-overflow: ''清空省略号（部分浏览器支持）。

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