Why does "overflow: hidden" cause the text to resize and reshape?
In the following HTML and CSS:
Below is the Fiddle :
/*CSS*/
.header {
margin: 0px;
padding: 0px;
width: 100%;
}
.headertable {
padding: 0px;
margin: 0px;
width: 100%;
border-spacing: 0px;
}
.headertabletr {
width: 100%;
padding: 0px;
margin: 0px;
}
.logoanimation a {
text-decoration: none;
color: black;
}
.logoanimation p {
display: inline-block;
margin: 0px;
}
.logodisapear1 {
overflow: hidden;
width: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.logoanimation:hover .logodisapear1 {
width: 23px;
}
.logoanimation:hover .logodisapear2 {
width: 56px;
}
.logodisapear2 {
overflow: hidden;
width: 0px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
<div class="container">
<div class="header">
<table class="headertable">
<tr class="headertabletr">
<td class="headerlogo">
<div class="logoanimation">
<a href="">
<p>
<</p>
<p>C</p>
<p class="logodisapear1">ode</p>
<p>U</p>
<p class="logodisapear2">niversity</p>
<p>/></p>
</a>
</div>
</td>
</tr>
</table>
</div>
</div>
Why are "ode" and "niversity" advancing and declining?
When i delete
overflow: hidden;
Returns to normal size but text overlaps?
+3
source to share
1 answer
The scroll bar takes up some height in the element <p>
.
Add vertical-align: bottom
:
/*CSS*/
.header {
margin: 0px;
padding: 0px;
width: 100%;
}
.headertable {
padding: 0px;
margin: 0px;
width: 100%;
border-spacing: 0px;
}
.headertabletr {
width: 100%;
padding: 0px;
margin: 0px;
}
.logoanimation a {
text-decoration: none;
color: black;
}
.logoanimation p {
display: inline-block;
margin: 0px;
}
.logodisapear1 {
overflow: hidden;
vertical-align: bottom;
width: 0px;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.logoanimation:hover .logodisapear1 {
width: 23px;
}
.logoanimation:hover .logodisapear2 {
width: 56px;
}
.logodisapear2 {
overflow: hidden;
vertical-align: bottom;
width: 0px;
-webkit-transition: all 0.4s linear;
-moz-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
-webkit-transition-delay: 200ms;
-moz-transition-delay: 200ms;
-o-transition-delay: 200ms;
transition-delay: 200ms;
}
<div class="container">
<div class="header">
<table class="headertable">
<tr class="headertabletr">
<td class="headerlogo">
<div class="logoanimation">
<a href="">
<p>
<</p>
<p>C</p>
<p class="logodisapear1">ode</p>
<p>U</p>
<p class="logodisapear2">niversity</p>
<p>/></p>
</a>
</div>
</td>
</tr>
</table>
</div>
</div>
+3
source to share