CSS line-clamp截断效果能否在默认省略号后追加“更多”等自定义提示文本

先纠正你现有代码里两个容易导致不生效的常见问题：

• 你给.summary手动写死height: 60px是冗余的，-webkit-line-clamp本身会根据行高、指定行数自动计算截断高度，固定height很容易导致行内容被硬切、和截断规则不匹配的问题，直接删掉这行即可。
• 低版本Chrome上不生效，很大概率是项目里的PostCSS/Autoprefixer工具会自动把必要的-webkit-box-orient: vertical规则删掉，只需要给这行代码加个忽略注释即可规避：

.summary {
  position: relative;
  display: -webkit-box;
  -webkit-box-orient: vertical; /* autoprefixer: ignore next */
  -webkit-line-clamp: 3;
  overflow: hidden;
  /* 保留你原有自定义的宽度、内边距、背景等样式 */
}

纯CSS快速实现自定义提示 #

• 核心思路是利用和容器同色的覆盖块，把默认生成的省略号挡住，替换成你想要的“继续”“更多”文本。
  对应的样式规则：

.summary {
  /* 给提示文本留出右侧空间，避免遮挡正文末尾的内容 */
  padding-right: 3em;
}

.summary::after {
  content: "更多";
  position: absolute;
  right: 0.5em;
  bottom: 0;
  line-height: 1.2em; /* 和父元素行高保持一致，避免文字上下错位 */
  /* 背景色和容器实际背景完全一致，挡住下方的默认省略号和被截断的正文 */
  background-color: #fff;
  color: #333;
  padding-left: 0.5em;
}

注意：这种纯CSS写法的缺陷是，哪怕正文内容不足3行、根本没触发截断，这个“更多”提示也会固定显示，你可以根据实际场景决定是否需要做进一步优化。

带截断状态判断的优化方案 #

如果要解决“内容没超3行也显示更多提示”的问题，只需要加几行极简JS做判断即可：

• 对比元素本身的可视高度和实际内容高度，如果实际高度大于可视高度，说明内容真的被截断了，才显示提示，否则隐藏。
  代码示例：

function detectTruncate(containerList) {
  containerList.forEach(el => {
    // 1px容错值，避免小数高度导致的判断误差
    const isOverflow = el.scrollHeight > el.clientHeight + 1;
    el.classList.toggle("truncated", isOverflow);
  })
}

// 页面初始化时遍历所有摘要容器做一次判断
detectTruncate(document.querySelectorAll(".summary"));
// 如果是动态加载的内容，在内容更新后再调用一次这个方法即可

调整对应CSS，让提示默认隐藏，只有容器带truncated类的时候才显示：

.summary::after {
  display: none;
  /* 保留之前的定位、文字样式等规则 */
}
.summary.truncated::after {
  display: block;
}

兼容性说明：目前主流现代浏览器都已支持line-clamp特性，Safari、Edge、Chrome的近3年版本均可正常运行，不存在广泛的兼容问题。

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