jquery - css overflow:hidden with display:inline-block -

i want use text-overflow: ellipsis cut text when long,but have problems when use overflow:hidden display:inline-block.

html:

<span class="text">     <span class="inner left">click 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 :

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

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

• what dose overflow:hidden do

my question not how fix figure out happened

related:why inline-block element pushed downward?

the reason :

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

thank of all

answer questions below.

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

a > need add vertical-align property align elements see no gaping. link with vertical align

code

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

}

ps: can change vertical-align:top; other vertical-align properties per needs.

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

a > alignment has nothing overflow. need use vertical-alignment align per want. believe, has link question 1. if check above, aligns.

what dose overflow:hidden do

this value indicates content clipped , no scrolling mechanism should provided view content outside clipping region; users not have access clipped content. size , shape of clipping region specified 'clip' property.

source

hope helps.