【JavaScript】原生内容的展开/收起超过两行省略号

在 JavaScript 中，为了实现元素内容的原生展开和收起功能，并在超过两行显示省略号，可以利用 HTML 的 `...` 作为占位符，并结合 CSS 和一些简单的 JavaScript 来控制隐藏或展示更多内容。这里是一个基本的例子：

首先，在 HTML 中创建一个包含可折叠内容的容器：

<div id="content" class="collapsible">
  这是一段很长很长的文字，可能会超出两行...
</div>

然后在 CSS 中设置样式，比如默认状态下的内容高度为两行，超出部分隐藏：

.collapsible {
  max-height: 40px; /* 可调整为两行的高度 */
  overflow: hidden;
  transition: max-height 0.5s ease;
}

接着，编写 JavaScript 代码来添加点击事件处理，切换内容的高度：

const content = document.getElementById('content');
const expandButton = document.createElement('button');
expandButton.textContent = '展开';

expandButton.addEventListener('click', function() {
  content.style.maxHeight = 'none';
});

content.appendChild(expandButton);

// 如果你想添加自动收起的功能，可以在适当的地方添加判断条件
// 比如当内容高度大于一定值时，自动收起
expandButton.addEventListener('mouseleave', function() {
  if (content.scrollHeight > content.clientHeight) {
    content.style.maxHeight = '40px';
  }
});

这样，当你点击“展开”按钮时，内容会完全显示；离开按钮时，如果内容长度超过了两行，它又会被隐藏。