Question

我想让我的文字展开并在悬停时显示其所有内容超过div大小的内容。这是我迄今为止所做的，但它侧面打开文本。我希望它向下显示文本，并且它对不超过div宽度的文本执行下滑效果。

.show {
  padding: 5px 5px 5px 5px;
 border-radius: 10px;
 height: 20px;
 margin: 5px 1% 5px 1%;
 position: relative;
 transition: height 0.5s;
 -webkit-transition: height 0.5s;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 1px;
 line-height: normal;
 outline: 0 none;
 text-decoration: none;
 text-transform: uppercase;
}

.show:hover {
height: 100px;
overflow: visible;
}

Answer 1

像这样改变：

.show:hover {
   overflow: visible;
   white-space: normal;
   height: auto;
}

完整代码：

.show {
  padding: 5px 5px 5px 5px;
 border-radius: 10px;
 height: 20px;
 margin: 5px 1% 5px 1%;
 position: relative;
 transition: height 0.5s;
 -webkit-transition: height 0.5s;
 text-align: center;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 font-size: 14px;
 font-weight: 500;
 letter-spacing: 1px;
 line-height: normal;
 outline: 0 none;
 text-decoration: none;
 text-transform: uppercase;
}
.show:hover {
overflow: visible;
white-space: normal;
height: auto;
}

<div class="show">
    To get text to flow around an image, you need to use the float property, which takes an element out of the
normal flow of the document and moves it to one side to make room for whatever follows. So, if you float an
image to the left, the following text flows into the empty space created on the right. The same happens with blocklevel
elements. When you float a block-level element, as long as there’s sufficient space alongside the floated
block, the following elements are no longer forced onto a new line, and they can move up.
</div>

在悬停时显示剩余文本

1 个答案: