<div class="content"> <p>这是一段需要展开收起的文字，可以有很多很多的字，可能会占据很多的空间。因此，在默认情况下，我们只会显示部分文字，而把其余的部分折叠起来。如果需要查看全部内容，可以点击“查看更多”按钮，文字内容就会展开显示了。</p> <button class="btn-more">查看更多</button> </div>
<div>标签来包裹需要展开收起的文字以及按钮元素。在<div>标签中，我们用一个<p>标签来显示需要展开收起的文字内容，在文字内容的下方，使用一个<button>标签来显示“查看更多”的按钮。.content p {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
/* 设置文字溢出时显示省略号 */
}
.content p.is-expanded {
overflow: visible;
white-space: normal;
/* 文字溢出时不再显示省略号 */
}
.btn-more {
display: block;
margin-top: 10px;
cursor: pointer;
/* 设置鼠标指针为手型 */
}let isExpanded = false;
<p>元素，并为这个元素添加或移除一个is-expanded的class。同时，更改按钮的文本内容，显示“更少”或“查看更多”，以提示用户当前的文字状态。const content = document.querySelector('.content');
const btnMore = document.querySelector('.btn-more');
btnMore.addEventListener('click', function() {
const paragraph = content.querySelector('p');
isExpanded = !isExpanded;
if (isExpanded) {
paragraph.classList.add('is-expanded');
btnMore.innerText = '收起';
} else {
paragraph.classList.remove('is-expanded');
btnMore.innerText = '查看更多';
}
});document.querySelector()方法获取到需要展开收起的文字对应的<p>元素和“查看更多”按钮对应的<button>元素。然后，给按钮元素添加一个点击事件监听器，当用户点击按钮时会触发这个事件。
<p>在事件监听器中，我们会通过isExpanded变量的状态来判断当前文字处于展开状态还是折叠状态。如果是展开状态，我们会给<p>元素添加一个is-expanded的class，并将按钮的文本设置为“收起”。反之，我们会移除is-expanded的class，并将按钮的文本设置为“查看更多”。
<p>到此为止，我们就成功地实现了一段文字的展开收起功能。当用户点击“查看更多”按钮时，可以展开或折叠需要展开收起的文字，让页面更加的简洁和易于阅读。以上是javascript实现一段文字展开收起的详细内容。更多信息请关注PHP中文网其他相关文章！
