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

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更新为float: left ，它的工作原理。 这不是overflow而是span s没有浮动的事实，它们是不对齐的。

Answer 3

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