0

This doesn't occur in Chrome. I am trying to implement an Ellipsis for the nested element. Has anyone else come across this and, if so, were you able to work around?

<span>bar <span class="foo">foo</span> bar</span>

span.foo {
    display: inline-block;
    overflow: hidden;        
}

Fiddle

<a href="http://www.stackoverflow.com">bar <span class="foo">foo</span> bar</a>

span.foo {
    display: inline-block;
    text-decoration: inherit;
    overflow: hidden;        
}

Fiddle

theblang
  • 10,215
  • 9
  • 69
  • 120
  • I had similar problem, try to change it to `display: inline;` this should solve your FF problems. Not really sure if it is the best solution for IE. – Boris Nov 28 '12 at 16:58
  • Meh, who cares about IE. I have to use `display: inline-block` though or the ellipsis won't work. – theblang Nov 28 '12 at 20:43

2 Answers2

3

Add vertical-align: top where you have display: inline-block.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
1

This is due to the specification on overflow, which works only on block element and how line-height work.

Your outer span is by default display:inline. An inline element should not contains block elements. Although, setting it to display:block won't fix the problem.

The problem is the baseline for the text (outer element) is the same for the box of the inner element. So the box sit at the same height it should start the text (which leave a bit of white space underneat).

Anyway, it might be easier to understand with a demo.

If you set the line-height of the inner-span to lower than the text actual height, the box will conserve its size. Of course thirtydot solution is also valid.

Kraz
  • 6,910
  • 6
  • 42
  • 70