html - 悬停时将 div 扩展到容器外的内容

Question

我有一个 div，它的内容通常比它本身大。应该 overflow hidden :

但是，当用户将鼠标悬停在 div 上时，它应该展开以适合内容。如有必要，应将其分层放置在容器上。不应扩展容器 div。 div 的右上角应保持在页面上的相同位置。

我尝试过position: relative、各种浮点值等等，但都没有成功。

如何实现这种布局？

Answer 1

您需要将内容(也许是一段)绝对定位在 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>