Html的代码你怎么忘记发给我了
时间: 2024-03-13 20:47:57 浏览: 72
非常抱歉,我忘记将HTML代码也一起发给您了。以下是完整的HTML代码,您可以复制到HTML文件中进行测试:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>展示更多按钮对齐</title>
<style>
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;
}
</style>
</head>
<body>
<div>这里是第一行文本,可以很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长很长<span>展示更多</span></div>
<script>
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);
</script>
</body>
</html>
```
再次感谢您的提醒,希望这次能够帮到您。