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

Tags: html,css,html5,css3

Problem :

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


HTML: Hello world

<span class="span2">
    Goodbye cruel world


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?

Solution :

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.

    CSS Howto..

    How to use the word-wrap property in CSS 2.1 and validate CSS

    How to create two Tables in JavaScript and use with different CSS?

    How to have different transistions for background-image and text in a div using CSS

    Telling LESS CSS how to behave with .active li

    How to fix side bar and header using CSS for JS & jQuery Scroller

    jQuery date picker show half day blocked

    How to make one string from a sentence capital in HTML/CSS?

    How am I supposed to change the Bootstrap CSS properties in a new Yeoman project?

    How to make this loading animation?

    How to move a table(or other content) next to vertical navigation bar

    How can I make a CSS selector for a button with two classes existing in .less?

    how to setup css value for “-webkit-transform” in the “animate” method? [duplicate]

    how to make yo angular load bootstrap theme css

    How do I make a container div only overflow horizontally without using “display:inline-block” for its inner divs?

    How to change in all css “#xxx” to “#000” [closed]

    CSS: How to accomplish a div which is blurred at the edges?

    How to set hyphenation at the end of word when to break word in CSS?

    How to execute jquery when a variable with a CSS property changes

    How to draw a horizontal line between two circles with css?

    How to remove outline dotted border with using css

    How to remove the double scroll?

    How to make images to go out of the div when width is over the max-width?

    How not to use body style css rule in part of html code?

    How to add a scrollbar to an HTML5 table?

    How to get selected table cells background colour?

    How can I register a css page from an ascx control?

    W3.CSS how to make container centered inside another container

    how can i center the footer text in the bottom of the page regardless of screen size

    How to preserve styles of embedded widget?

    How to create fixed to screen layout