Menu
I have following HTML:
<div>
a<span style="overflow: hidden; display: inline-block;">b</span>c
</div>
What I expect to see: abc.
What I see (in Chrome, Safari, Firefox): 
b is higher than a and c. Why it is so and how to fix it?
822
“display: inline-block” Property: This property is used to display an element as an inline-level block container. The element itself is formatted as an inline element, but it can apply height and width values. It is placed as an inline element (on the same line as adjacent content).
overflow: hidden With the hidden value, the overflow is clipped, and the rest of the content is hidden: You can use the overflow property when you want to have better control of the layout. The overflow property specifies what happens if content overflows an element's box.
opposite of display block is. display : none; it used for deleting and recreating them. You can also consider inline-block : inline-block elements inline elements but they have a width and a height.
The opposite of the default visible is hidden. This literally hides any content that extends beyond the box. This is particularly useful in use with dynamic content and the possibility of an overflow causing serious layout problems.
This happens because the inline-block element has height equal to its parent and overflow: hidden causes its bottom edge to be aligned on the text baseline of the parent. As a result the space that is available for descenders on the text is essentially doubled for the <span> (JSFiddle).
You can fix this by also giving it vertical-align: bottom.
95
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
