当文本受限时，jQuery隐藏显示更多按钮

当文本受限时，可以使用jQuery来实现隐藏显示更多按钮。jQuery是一种快速、简洁的JavaScript库，可以简化HTML文档遍历、事件处理、动画等操作。

隐藏显示更多按钮的实现步骤如下：

首先，在HTML中创建一个用于显示文本的容器，例如一个<div>元素。
在CSS中设置容器的高度和overflow属性，以限制文本的显示区域，并隐藏超出部分的文本。
使用jQuery选择器选中该容器，并获取其文本内容。
判断文本内容的长度是否超过限制，如果超过，则在容器末尾添加一个“显示更多”按钮。
给“显示更多”按钮添加点击事件，当点击按钮时，使用jQuery的动画效果展开容器，显示完整的文本内容。

以下是一个示例代码：

HTML:

<div class="text-container">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae semper elit. Nullam auctor, mauris in aliquet luctus, enim nisl ultrices nunc, id varius purus mi vel urna.</p>
</div>

CSS:

.text-container {
  height: 100px;
  overflow: hidden;
}

JavaScript (使用jQuery):

$(document).ready(function() {
  var container = $('.text-container');
  var text = container.text();
  var maxLength = 100; // 设置文本的最大长度

  if (text.length > maxLength) {
    var truncatedText = text.substring(0, maxLength) + '...';
    container.text(truncatedText);
    container.append('<a href="#" class="show-more">显示更多</a>');

    $('.show-more').click(function(e) {
      e.preventDefault();
      container.animate({ height: 'auto' }, 'slow');
      $(this).remove();
    });
  }
});

在上述代码中，我们首先选择了.text-container类的元素作为文本容器，获取其文本内容并判断长度是否超过限制。如果超过限制，我们截取部分文本并添加“显示更多”按钮。当点击按钮时，使用jQuery的animate()方法展开容器，显示完整的文本内容，并移除按钮。

这是一个简单的示例，你可以根据实际需求进行修改和扩展。