帮我写一段代码实现文字溢出显示省略号,设置一个按钮,点击显示溢出文字并去掉省略号
时间: 2023-06-03 21:05:34 浏览: 135
好的,以下是代码实现:
HTML部分:
```html
<div class="text-container">
<p class="text">这是一段需要溢出显示省略号的文字这是一段需要溢出显示省略号的文字这是一段需要溢出显示省略号的文字这是一段需要溢出显示省略号的文字这是一段需要溢出显示省略号的文字这是一段需要溢出显示省略号的文字</p>
<button id="more-btn">查看更多</button>
</div>
```
CSS部分:
```css
.text-container {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#more-btn {
display: block;
margin-top: 10px;
}
```
JavaScript部分:
```javascript
const textContainer = document.querySelector('.text-container');
const text = document.querySelector('.text');
const moreBtn = document.querySelector('#more-btn');
moreBtn.addEventListener('click', () => {
if (textContainer.classList.contains('expand')) {
textContainer.classList.remove('expand');
moreBtn.innerHTML = '查看更多';
} else {
textContainer.classList.add('expand');
moreBtn.innerHTML = '收起';
}
});
```
上述代码中,CSS部分通过 `text-overflow: ellipsis;` 实现文字溢出显示省略号的效果。JavaScript部分监听按钮的点击事件,通过给容器添加或移除 `.expand` 类来切换溢出文字的显示与隐藏。点击按钮时,还切换了按钮的文字内容。
阅读全文