eltabs 标题超出省略号 选中显示全部
时间: 2023-07-05 18:21:13 浏览: 54
可以通过CSS中的`text-overflow`属性来实现标题超出省略号,并通过JavaScript来控制选中显示全部。具体实现步骤如下:
1. 在CSS中使用`text-overflow`属性来实现标题超出省略号:
```css
.eltabs__title {
white-space: nowrap; /* 防止标题换行 */
overflow: hidden; /* 超出部分隐藏 */
text-overflow: ellipsis; /* 超出部分显示省略号 */
}
```
2. 在HTML中添加一个“显示全部”按钮,并为每个标题添加一个`data-text`属性,用于存储完整标题文本:
```html
<div class="eltabs__title" data-text="完整标题文本">标题</div>
<button class="eltabs__btn">显示全部</button>
```
3. 使用JavaScript来控制按钮的点击事件,切换标题的显示状态:
```javascript
const titles = document.querySelectorAll('.eltabs__title');
const btns = document.querySelectorAll('.eltabs__btn');
btns.forEach((btn, index) => {
btn.addEventListener('click', () => {
if (titles[index].classList.contains('eltabs__title--ellipsis')) {
titles[index].textContent = titles[index].dataset.text;
titles[index].classList.remove('eltabs__title--ellipsis');
btn.textContent = '收起';
} else {
titles[index].textContent = titles[index].textContent.slice(0, 10) + '...';
titles[index].classList.add('eltabs__title--ellipsis');
btn.textContent = '显示全部';
}
});
});
```
这段代码首先获取所有标题和按钮元素,然后为每个按钮添加一个点击事件。当点击按钮时,检查标题元素是否已经被省略显示,如果是,则将标题文本替换为`data-text`属性中存储的完整标题文本,并移除`eltabs__title--ellipsis`类。同时,将按钮文本替换为“收起”。如果标题没有被省略显示,则将标题文本缩短为10个字符并添加省略号,并添加`eltabs__title--ellipsis`类。同时,将按钮文本替换为“显示全部”。