Why does overflow hidden affect height and how can I fix it in this example?

Question

Fiddle: https://jsfiddle.net/wa51kdh7/

Code:

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;
}

Here I am trying to create two spans next to each other, only one of them has overflow: hidden and the other shouldn't have overflow: hidden. For some reason the overflow: hidden affects the heights and they don't line up - even when I use an explicit height.

Any idea how to fix this?

Answer 1

This can also be fixed by adding vertical-align: top to the span's CSS rule. The reason that both rules fix the problem is that they enforce the vertical alignment of the divs.

Adding a vertical-align rule will keep you from potentially having the elements that follow from needing to be cleared.

Answer 2

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

Answer 3

Hi I just updated your span to float: left and it works. It's not the overflow but the fact the spans aren't floated that they are misaligned.