前端实现当文本过多时隐藏显示查看更多按钮

可以使用CSS的text-overflow属性和JavaScript来实现这个效果。

首先，在CSS中使用text-overflow属性将超出容器宽度的文本隐藏，并显示省略号：

.container {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

接着，在JavaScript中获取文本容器的高度和文本的实际高度，当文本实际高度大于容器高度时，显示“查看更多”按钮，并设置点击事件：

var container = document.querySelector('.container');
var content = document.querySelector('.content');
var btn = document.querySelector('.btn');

if (content.offsetHeight > container.offsetHeight) {
  btn.style.display = 'block';
  btn.addEventListener('click', function() {
    container.style.height = 'auto';
    btn.style.display = 'none';
  });
}

当点击“查看更多”按钮时，将文本容器的高度设置为auto，这样就可以展示完整的文本了。

完整的HTML和CSS代码如下：

<style>
.container {
  width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.btn {
  display: none;
}
</style>

<div class="container">
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed varius ante vel velit sodales, non pellentesque mauris mollis. Nam nec leo at purus aliquet maximus sit amet ut metus. Duis velit urna, sagittis ut sollicitudin a, fringilla sit amet massa. Aliquam erat volutpat. Etiam id ante luctus, fermentum lorem eu, ultrices magna. Vivamus auctor at turpis id mattis. Sed euismod, velit nec suscipit mattis, urna erat consequat velit, quis volutpat sapien mi quis nisi. Nulla facilisi. Curabitur sed ante vel nulla aliquet malesuada. Vestibulum vel neque ac magna bibendum porttitor. Sed ac felis est.

    Duis euismod tincidunt elit, in bibendum ipsum rutrum in. Aliquam luctus at dolor vel placerat. Duis lobortis bibendum libero, vel convallis sapien hendrerit in. Sed sollicitudin, leo sed eleifend ornare, nunc libero laoreet lectus, vel accumsan velit massa in velit. Nullam sed risus vitae risus mollis scelerisque. Fusce pellentesque, ante vel finibus euismod, nunc dolor luctus justo, et fringilla augue sapien vel velit. Nullam interdum, ligula vel rhoncus bibendum, felis sapien blandit ipsum, vel porttitor felis dui eu nisl. Duis ac libero justo. Nullam finibus aliquam eros, vel semper quam facilisis eu.

    Sed tristique velit erat, eget vehicula mauris elementum eget. Nullam nec nunc in mauris tempor auctor. Quisque congue at sapien nec faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut ut bibendum nibh. Donec ut elementum leo. Nullam non mauris non lacus condimentum facilisis. Sed tristique, justo ut lobortis interdum, felis felis suscipit nunc, eu porta quam justo vel nisi. Nulla vitae augue vel erat vestibulum blandit. Sed quam odio, blandit ut libero nec, tempus gravida mi. Sed sed sapien ipsum. Quisque sed eros ut felis suscipit lacinia. Sed nec magna eu velit dictum vehicula. Duis nec enim tristique, blandit lectus eget, sodales sapien. Ut non erat non nisi commodo ultricies. 
  </div>
  <button class="btn">查看更多</button>
</div>

<script>
var container = document.querySelector('.container');
var content = document.querySelector('.content');
var btn = document.querySelector('.btn');

if (content.offsetHeight > container.offsetHeight) {
  btn.style.display = 'block';
  btn.addEventListener('click', function() {
    container.style.height = 'auto';
    btn.style.display = 'none';
  });
}
</script>