如何实现文本最多显示5行效果，通过CSS或jQuery完成展开收起功能？

你要的多行文本超出5行显示展开按钮的效果，可以仅通过CSS实现，以下分别提供CSS和JS两种实现方案：

纯CSS实现方案 #

原理是借助隐藏的checkbox控件的:checked状态，配合CSS兄弟选择器控制文本区域的展开收起，无需JS代码。

/* 隐藏原生checkbox */
.expand-check {
  display: none;
}

.content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-height: 22px;
}

/* checkbox选中后展开全部文本 */
.expand-check:checked + .content {
  -webkit-line-clamp: unset;
}

.more {
  text-align: center;
  margin-top: 8px;
}
.more label {
  cursor: pointer;
  text-decoration: none;
  color: #222;
}
/* 选中后切换按钮文字 */
.expand-check:checked ~ .more .show::after {
  content: "收起";
}
.expand-check:not(:checked) ~ .more .show::after {
  content: "展开";
}

<div class="demo">
  <input type="checkbox" id="expand1" class="expand-check">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  <div class="more">
    <label for="expand1" class="show"></label>
  </div>
</div>

注意事项：

• 该方案兼容所有主流webkit内核浏览器，覆盖绝大多数移动端和PC端Chrome、Edge、Safari场景
• 如果需要适配火狐等非webkit内核浏览器，可以把-webkit-line-clamp换成固定高度控制，收起时设置固定高度等于5行文本高度，展开时高度设置为auto即可

JS实现方案 #

该方案灵活度更高，支持自动判断文本是否真的超出5行，只有超出时才显示展开按钮，不会在文本不足5行时展示多余的按钮。

.content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  line-height: 22px;
  transition: all 0.3s ease;
}
.content.expanded {
  -webkit-line-clamp: unset;
}
.more {
  text-align: center;
  margin-top: 8px;
  display: none; /* 默认隐藏，超出后JS控制显示 */
}
.more .show {
  cursor: pointer;
  color: #222;
}

<div class="demo">
  <p class="content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit odit fugit debitis, quibusdam esse eius ullam odio cupiditate cumque nostrum asperiores libero, sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt sapiente aliquid animi? Saepe eligendi doloremque possimus. Velit sunt earum aliquam debitis quos eum atque nemo eius, hic quas doloremque facere et voluptatibus voluptatum eaque corrupti impedit ipsum beatae incidunt 
  </p>
  <div class="more">
    <span class="show">展开</span>
  </div>
</div>

const content = document.querySelector('.content');
const moreBtn = document.querySelector('.more');
const showBtn = document.querySelector('.show');

// 判断文本是否超出5行
const isOverflow = content.scrollHeight > content.offsetHeight;
if (isOverflow) {
  moreBtn.style.display = 'block';
}

// 切换展开收起
showBtn.addEventListener('click', () => {
  content.classList.toggle('expanded');
  showBtn.textContent = content.classList.contains('expanded') ? '收起' : '展开';
});

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