html - 为什么 overflow hidden 会影响高度，在此示例中我该如何解决？

Question

fiddle :https://jsfiddle.net/wa51kdh7/

代码:

HTML: Hello World

<span class="span2">
    Goodbye cruel world
</span>

CSS:

span {
    display: inline-block;
    margin: 0;
    padding: 0;
    line-height: 16px;
    font-size: 16px;
    height: 16px;
}

.span1 {
    background-color: lightblue;
}

.span2 {
    background-color: pink;
    overflow: hidden;
    width: 130px;
    text-overflow: ellipsis;
}

在这里，我试图创建两个彼此相邻的跨度，其中只有一个有溢出:隐藏，另一个不应该有溢出:隐藏。出于某种原因，溢出:隐藏会影响高度并且它们不会对齐 - 即使我使用明确的高度也是如此。

知道如何解决这个问题吗？

Answer 1

这也可以通过将 vertical-align: top 添加到 span 的 CSS 规则来解决。两条规则解决问题的原因是它们强制 div 的垂直对齐。

添加 vertical-align 规则将使您避免可能需要清除后面的元素。