css overflow:hidden with display:inline-block

Question

I want to use text-overflow: ellipsis to cut some text when it is too long,but I have some problems when I use overflow:hidden with display:inline-block.

html:

<span class="text">
    <span class="inner left">Click to add overflow</span>
    <span class="inner right"> long text here</span>
</span>
<div class="bottom"></div>

css:

.text {
    line-height: 50px;
    font-size: 20px;
    display: inline-block;
}
.right {
    display:inline-block;
    text-overflow: ellipsis;
    width: 100px;
    white-space: nowrap;
}
.overflow {
    overflow: hidden;
}

javascript:

$('.text').on('click', function() {
    $(this).toggleClass('overflow');
    $('.right').toggleClass('overflow');
})

jsfiddle: http://jsfiddle.net/zhouxiaoping/knw7m5k2/2/

My question is :

• why there is 2px blank between .text element and .bottom element when the .text has overflow:hidden attribute

• why the .right elment not align with the left when it has overflow:hidden attribute

• what dose the overflow:hidden really do

my question is not how to fix it but figure out what happened

related: Why is this inline-block element pushed downward?

the really reason is :

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.

thank you for the help of all

Answer 1

Answer to your questions as below.

why there is 2px blank between .text element and .bottom element when the .text has overflow:hidden attribute

A > You need to add a vertical-align property to align the elements to see no gaping. Link With Vertical Align

Code

.overflow {
overflow: hidden;
vertical-align: top;

}

PS: You can change vertical-align:top; to any other vertical-align properties as per your needs.

why the .right elment not align with the left when it has overflow:hidden attribute

A > Alignment has nothing to do with overflow. You need to use vertical-alignment to align it as per you want. I also believe, that this has a link to question 1. So if you check the above, it now aligns.

what dose the overflow:hidden really do

This value indicates that the content is clipped and that no scrolling mechanism should be provided to view the content outside the clipping region; users will not have access to clipped content. The size and shape of the clipping region is specified by the 'clip' property.

Source

Hope this helps.

Answer 2

you need to use float:left; for both span. after that some adjustment like line-height, margin. find fiddle demo

.left {
font-size: 12px;
font-weight: bold;
float:left;
line-height:55px;
}
.right {
margin-left:4px;    
float:left;
text-overflow: ellipsis;
width: 100px;
white-space: nowrap;
}