为什么“溢出：隐藏”会导致文本改变大小和形状？答案

【问题标题】：Why does "overflow: hidden" cause the text to change size and shape?为什么“溢出：隐藏”会导致文本改变大小和形状？
【发布时间】：2015-06-19 01:39:18
【问题描述】：

在以下 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;

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

【问题讨论】：

作为 Kaiido 答案的补充，如果您添加 float: left; 它也会删除空格。

标签： html css

【解决方案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>

【讨论】：

这似乎是由于overflow设置为hidden时<p>的基线更改为其父基线的基线...behaviour is outlined in this answer.
这是您的答案，但“应该修复它”意味着进行更改可能无法解决问题，但事实并非如此 :) 如果您想建议这只是一个解决方案，你可以说“一个解决方案是添加......”在我看来，答案应该以自信的方式写出来。