残りのテキストをホバーに表示

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>