gpt4 book ai didi

html - 悬停时显示剩余文本

转载 作者:可可西里 更新时间:2023-11-01 12:58:44 24 4
gpt4 key购买 nike

我希望我的文本在悬停时展开并显示其所有内容,这些内容比 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;
}

最佳答案

像这样改变:

.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>

关于html - 悬停时显示剩余文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44734757/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com