如何在line-clamp截断文本后内联添加可切换的‘Read More’？

你的核心问题在于-webkit-line-clamp的浏览器内部截断机制会隐藏容器内的额外内容（包括伪元素），所以直接用伪元素或追加HTML的方式没法把“... Read More”内联到截断文本末尾。以下是可行的实现方案：

调整后的HTML结构 #

将文本与“Read More”按钮分离，用容器统一控制布局：

<div class="text-container">
  <p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nibh velit, suscipit bibendum sagittis non, consequat vestibulum ante. Praesent in fermentum turpis. Nam nec erat vulputate, imperdiet mi ac, porttitor diam. Quisque posuere odio vel nulla varius dictum. Vestibulum malesuada tellus id cursus pretium. Cras volutpat, diam vel molestie bibendum, neque risus ullamcorper augue</p>
  <span class="read-more">... Read More</span>
</div>

CSS样式优化 #

通过绝对定位将“Read More”锚定在文本末尾，同时控制展开/收起状态：

.text-container {
  position: relative;
  width: 50%;
  max-height: 4em; /* 对应2行文本高度，可根据字体大小调整 */
  overflow: hidden;
}

.text-container.expanded {
  max-height: none;
}

.content {
  margin: 0;
}

.read-more {
  position: absolute;
  bottom: 0;
  right: 0;
  background: #fff; /* 覆盖后方截断文本，避免重叠 */
  padding-left: 10px;
  cursor: pointer;
  color: #0066cc;
}

.text-container.expanded .read-more {
  display: none;
}

/* 可选：展开后显示收起按钮 */
.read-less {
  display: none;
  color: #0066cc;
  cursor: pointer;
  margin-left: 8px;
}

.text-container.expanded .read-less {
  display: inline;
}

JavaScript逻辑调整 #

基于内容实际高度判断是否需要截断，同时处理状态切换：

const container = document.querySelector('.text-container');
const content = document.querySelector('.content');
const readMore = document.querySelector('.read-more');

// 创建收起按钮
const readLess = document.createElement('span');
readLess.className = 'read-less';
readLess.textContent = 'Read Less';
content.appendChild(readLess);

// 判断内容是否超出容器高度（比单纯判断文本长度更准确）
const needTruncate = content.scrollHeight > container.clientHeight;
if (needTruncate) {
  container.classList.add('collapsed');
} else {
  readMore.style.display = 'none';
}

// 绑定切换事件
readMore.addEventListener('click', () => container.classList.toggle('expanded'));
readLess.addEventListener('click', () => container.classList.toggle('expanded'));

核心原理说明 #

1. 用max-height替代-webkit-line-clamp，解决伪元素被隐藏的问题，同时通过绝对定位实现“... Read More”的内联效果。
2. 基于scrollHeight和clientHeight的对比判断是否需要截断，适配不同字体、字号下的实际显示效果。
3. 展开/收起时切换容器类名，控制内容高度和按钮显示状态。

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