<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中文網其他相關文章！
