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

Nitesh · Accepted Answer · 2015-05-12T06:13:00.197

10

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.

edited May 12 '15 at 06:13

answered May 12 '15 at 06:00

Nitesh

15,425
4
48
60

overflow:hidden gets toggled for .text in onclick, `$(this).toggleClass('overflow');` – Patrick Evans May 12 '15 at 06:03
@PatrickEvans - My apologies. `.overflow` should be complemented with a `vertical-align` property to resolve this. I have updated the answer. – Nitesh May 12 '15 at 06:10
2

sorry for so late to reply. The default vertical-align value is baseline,I know vertical-align:top can resolve it ,but why? the default value baseline works fine before the overflow:hidden has been added, so ,my real question is what happend when overflow:hidden is added, does it damage the inline-box model? – super-xp May 13 '15 at 02:27
1

No worries @super-xp. FYI Read this https://code.google.com/p/chromium/issues/detail?id=176244 Its chrome specification which has mentioned this as an issue. As it does not understand it, you need to explicitly add a `vertical-align` property with a `top` value to make it work, as it does not read `baseline` as it actually should. Hope this helps. – Nitesh May 13 '15 at 04:51

score 0 · Answer 2 · answered May 12 '15 at 06:22

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

css overflow:hidden with display:inline-block

2 Answers2