html - 容器有什么问题

Question

<分区>

Answer 1

原因不是溢出，而是display: inline-block;:

.title {
  margin-top: 100px;
  margin-left: 50px;
  font-size: 30px;
  position: absolute;
  /* debug */
  background-color: blue;
}

.first {
  /* debug */
  background-color: green;
}

.second {
  overflow: hidden;

  /* debug */
  background-color: red;
}

<div>
  <div class="title">
    <span class="first">Start</span>
    <span class="second"> end</span>
  </div>
</div>

编辑:

如果一定要display: inline-block;，添加vertical-align: text-bottom;:

.title {
  margin-top: 100px;
  margin-left: 50px;
  font-size: 30px;
  position: absolute;
  /* debug */
  background-color: blue;
}

.first {
  /* debug */
  background-color: green;
}

.second {
  overflow: hidden;
  display: inline-block;
  vertical-align: text-bottom;
  /* debug */
  background-color: red;
}

<div>
  <div class="title">
    <span class="first">Start</span>
    <span class="second"> end</span>
  </div>
</div>