我有一个 div
,它的内容通常比它本身大。应该 overflow hidden :
但是,当用户将鼠标悬停在 div
上时,它应该展开以适合内容。如有必要,应将其分层放置在容器上。不应扩展容器 div。 div 的右上角应保持在页面上的相同位置。
我尝试过position: relative
、各种浮点值等等,但都没有成功。
如何实现这种布局?
最佳答案
您需要将内容(也许是一段)绝对定位在 div 中。
修改悬停时的高度和溢出。
* {
margin: 0;
padding: 0;
}
div {
width: 200px;
margin: 2em auto;
height: 1.2em;
position: relative;
overflow: hidden;
border: 1px solid grey;
white-space: nowrap;
text-overflow: ellipsis;
}
div p {
text-align: left;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: pink;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
div:hover {
overflow: visible;
}
div:hover p {
height: auto;
white-space: normal
}
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad, maxime.</p>
</div>
关于html - 悬停时将 div 扩展到容器外的内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38787599/