html - 为什么 "overflow: hidden"会导致文本改变大小和形状？

Question

在以下 HTML 和 CSS 下:

这是一个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>

为什么“ode”和“niversity”会上升并变小？

当我删除

overflow: hidden;

恢复正常大小，但文字重叠？

Answer 1

滚动条在您的 <p> 中占用了一些高度元素。

添加vertical-align: bottom :

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