超出行数...隐藏并在最后一行最后加展开按钮

 今天需求出现了一个与正常的超出行数隐藏并使用...展示不一样的地方。

一般来说正常的超出省略使用CSS就能解决

<p class="ellipsis">这是一段很长的文本，当它超过一行时将被隐藏并显示省略号。</p>

超出一行：
 

css
.ellipsis {
  display: inline-block; /* 设置为内联块级元素 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap; /* 不换行 */
  max-width: 100%; /* 最大宽度不超过父容器 */
}

超出行数自定义

.ellipsis {
  display: -webkit-box; /* 设置为块级元素 */
  -webkit-line-clamp: 2; /* 控制显示的行数 */
  -webkit-box-orient: vertical; /* 设置为垂直方向布局 */
  overflow: hidden; /* 隐藏溢出的内容 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: normal; /* 换行 */
}

我想了很多办法，我们在最后一行想加个按钮使用css是不行的，解决就只能使用最原始的、最好理解的方法：

templa