如何让文本最多显示五行，并通过CSS或jquery完成折叠效果？

<div class="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed condimentum consequat urna, at sagittis velit sagittis eu.</p>
  <button class="expand-button">展开</button>
</div>

.text-container {
  height: 5em; /* 五行的高度 */
  overflow: hidden;
  text-overflow: ellipsis; /* 或者自定义文本 */
}

.expand-button {
  display: none; /* 初始隐藏按钮 */
}

.expand-button:hover {
  display: inline-block; /* 鼠标悬停时显示按钮 */
}

$(document).ready(function() {
  var textContainer = $('.text-container');
  var textHeight = textContainer.height();
  var expandButton = $('.expand-button');

  if (textContainer[0].scrollHeight > textHeight) {
    // 文本超过五行高度，显示展开/折叠按钮
    expandButton.css('display', 'inline-block');
  }

  expandButton.click(function() {
    if (textContainer.height() == textHeight) {
      // 展开文本
      textContainer.css('height', 'auto');
      expandButton.text('折叠');
    } else {
      // 折叠文本
      textContainer.css('height', textHeight);
      expandButton.text('展开');
    }
  });
});