在JavaScript中实现文本的收起展开（省略）功能，通常需要结合HTML和CSS来完成。以下是实现这一功能的步骤：

HTML结构

首先，你需要一个HTML结构来表示文本内容以及展开和收起的按钮。

<div class=\"text-container\">

<p class=\"text\">这是一段很长的文本，需要进行收起和展开操作。</p>

<button class=\"toggle-btn\">更多</button>

</div>

CSS样式

然后，添加一些CSS来控制文本的显示和按钮的样式。

.text-container {

width: 300px; /* 根据需要调整宽度 */

}

.text {

line-height: 1.4;

overflow: hidden;

text-overflow: ellipsis;

display: -webkit-box;

-webkit-line-clamp: 3; /* 显示的行数 */

-webkit-box-orient: vertical;

height: 4.2em; /* 根据行数和行高计算高度 */

}

.toggle-btn {

display: none;

margin-top: 10px;

cursor: pointer;

}

JavaScript逻辑

最后，用JavaScript来控制文本的显示和隐藏，以及按钮的显示。

document.addEventListener(\'DOMContentLoaded\', function() {

var text = document.querySelector(\'.text\');

var toggleBtn = document.querySelector(\'.toggle-btn\');

toggleBtn.addEventListener(\'click\', function() {

if (text.style.overflow === \'hidden\') {

text.style.overflow = \'visible\';

text.style.height = \'auto\';

toggleBtn.textContent = \'收起\';

} else {

text.style.overflow = \'hidden\';

text.style.height = \'4.2em\'; // 根据CSS中设置的高度

toggleBtn.textContent = \'更多\';

}

});

// 监听窗口大小变化，以适应文本内容变化

window.addEventListener(\'resize\', function() {

if (window.innerWidth < 600) {

toggleBtn.style.display = \'block\';

} else {

toggleBtn.style.display = \'none\';

}

});

这段代码首先等待DOM内容加载完成，然后为“更多”按钮添加点击事件监听器。当按钮被点击时，它会切换文本的显示状态。此外，还监听了窗口大小变化，以适应不同屏幕大小下的显示需求。

请注意，-webkit-line-clamp属性是非标准的，并且只在WebKit和Blink引擎的浏览器中有效（例如Chrome、Safari、新版的Edge）。如果你需要更广泛的浏览器支持，可能需要使用JavaScript来模拟这一行为。