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

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到spanCSS规则来修复.这两个规则解决问题的原因是它们强制执行div的垂直对齐.

添加vertical-align规则将使您无法清除需要清除的元素.