我想要的是第一行末尾和第二行的展示更多按钮末尾对齐,用你的方法省略号和按钮都超出第一行末尾了
时间: 2024-03-13 09:47:56 浏览: 19
感谢您的指正,我理解您的意思了。要实现第一行末尾和第二行的展示更多按钮末尾对齐,可以采用以下方法:
1. 先将div元素设置为两行高度,同时设置overflow为hidden,确保只显示两行文本。
2. 然后使用CSS的伪元素(::before)来获取第一行文本的内容,并将其放在最后一行展示更多按钮的前面。
3. 接着,在第一行文本的后面添加一个展示更多的按钮。
4. 最后,将div元素的高度设置为auto,同时隐藏第二行文本,这样就可以展示全部第一行文本和展示更多按钮,并且展示更多按钮的末尾会与第一行文本末尾对齐。代码如下:
```
div {
height: 2em; // 假设每行文本高度为1em
overflow: hidden;
position: relative;
}
div::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
right: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
button {
position: absolute;
bottom: 0;
right: 0;
}
div.expanded {
height: auto;
}
div.expanded::after {
content: "";
display: block;
height: 1em; // 假设每行文本高度为1em
}
div.expanded::before {
display: none;
}
div.expanded button {
display: none;
}
var div = document.querySelector("div");
div.setAttribute("data-text", div.innerText);
div.innerHTML = ""; // 清空div元素的内容
div.classList.add("expanded");
var button = document.createElement("button");
button.innerText = "展示更多";
button.onclick = function() {
div.classList.remove("expanded");
};
div.appendChild(button);
```
这样就完成了需求的实现。希望能够满足您的要求。
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://csdnimg.cn/download_wenku/file_type_lunwen.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)