CSS实现多行文本溢出显示省略号后追加展开按钮的可行性问询

纯CSS即可实现该需求，无需依赖JavaScript判断文本是否溢出，核心利用元素排版特性控制展开按钮的显隐。

1. 基础DOM结构 #

<div class="text-container">
  <p class="text-content">待展示的多行文本内容，内容溢出时会自动显示展开按钮，无溢出时按钮自动隐藏</p>
  <span class="expand-btn">展开</span>
</div>

2. 核心CSS代码 #

/* 外层容器：实现多行溢出省略 */
.text-container {
  position: relative;
  line-height: 20px;
  max-height: 60px; /* 按需要展示的行数计算：行数*行高，这里是3行 */
  overflow: hidden;
  padding-right: 4em; /* 右侧预留展开按钮的展示空间 */
  text-align: justify;
  /* 多行省略核心属性 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  background: #fff; /* 容器背景色，需和按钮背景色一致 */
}

/* 展开按钮：固定在右下角 */
.expand-btn {
  position: absolute;
  right: 0;
  bottom: 0;
  background: #fff; /* 和容器背景色保持一致 */
  color: #1677ff;
  cursor: pointer;
}

实现原理 #

• 文本未溢出时，最后一行文本会占满整行宽度，刚好把右下角的展开按钮完全遮挡，按钮不可见
• 文本溢出时，最后一行末尾会留出省略号的展示空间，此时右下角的展开按钮露出，刚好显示在省略号之后

如果需要适配渐变背景、图片背景等特殊场景，纯CSS的同色背景遮挡方案会有局限性，此时可以搭配简单的JS逻辑实现：

const textContainer = document.querySelector('.text-container')
const expandBtn = document.querySelector('.expand-btn')
// 文本滚动高度大于容器可见高度，说明存在溢出
expandBtn.style.display = textContainer.scrollHeight > textContainer.clientHeight ? 'inline-block' : 'none'

注：-webkit-line-clamp属性已被所有主流浏览器支持，无需额外处理兼容性问题。

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