html怎么让div多出设置的字符出现省略号后出现展开符号然后点击收回变成原始模样
时间: 2023-12-14 13:36:07 浏览: 30
可以通过CSS的`text-overflow`属性来实现文字溢出时显示省略号,同时使用JavaScript来实现点击展开和收回的效果。
具体实现方法如下:
HTML代码:
```html
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra justo quis mauris faucibus, non lacinia enim congue. Integer sed elit quis risus semper facilisis. In hac habitasse platea dictumst. Praesent vel sapien at lectus molestie bibendum at sed ante.</div>
```
CSS代码:
```css
.content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.show-more {
display: none;
}
```
JavaScript代码:
```javascript
const content = document.querySelector('.content');
const showMoreBtn = document.createElement('button');
showMoreBtn.innerText = '展开';
showMoreBtn.addEventListener('click', () => {
if (content.classList.contains('expanded')) {
content.classList.remove('expanded');
showMoreBtn.innerText = '展开';
} else {
content.classList.add('expanded');
showMoreBtn.innerText = '收起';
}
});
content.parentElement.appendChild(showMoreBtn);
if (content.scrollHeight > content.clientHeight) {
showMoreBtn.style.display = 'block';
}
```
上述代码中,我们首先使用CSS的`text-overflow`属性来实现文字溢出时显示省略号。然后,我们使用JavaScript来动态添加一个展开/收起按钮,并在按钮被点击时添加或移除`.expanded`类。最后,我们判断内容是否溢出,如果溢出则显示展开/收起按钮。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)