为什么溢出隐藏会影响高度？如何在此示例中修复它？

Question

小提琴：https://jsfiddle.net/wa51kdh7/

代码：

HTML：              你好，世界     

<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规则可能会使您无法清除需要清除的元素。

Answer 2

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