Please have a look at this fiddle - http://jsfiddle.net/Z27hC/
var container = document.createElement('span'); container.style.display = 'inline-block'; container.style.marginTop = '10px'; container.style.marginLeft = '50px'; container.style.background = 'lightblue'; document.body.appendChild(container); var cell = document.createElement('span'); cell.style.display = 'inline-block'; cell.style.border = ' 2px solid black'; cell.style.width = '200px'; cell.style.height = '16px'; cell.style.overflow = 'hidden'; container.appendChild(cell); var text_node = document.createTextNode('hallo'); cell.appendChild(text_node);
I have a container, containing a cell, containing a text node. The cell has a fixed width.
If the text passed to the text node exceeds the width, I want it to be truncated, so I set the cell to 'overflow: hidden'.
It works, but it causes the height of the cell to increase by 3px. The cell has a border, but the increased height appears below the border, not inside it.
As I have many cells in a spreadsheet style, it messes up the layout.
I have tested this on IE8 and Chrome, with the same result.
Any of the following solutions would be ok -
As requested, here is a new fiddle that shows a more complete example.
http://jsfiddle.net/frankmillman/fA3wy/
I hope it is self-explanatory. Let me know if you need anything explained in more detail.
Here is (hopefully) my final fiddle -
http://jsfiddle.net/frankmillman/RZQQ8/
It incorporates ideas from all responders, and it now works as I want.
There are two main changes.
The first one was inspired by Mathias' table solution. Instead of an intermediate container, containing a blank row and a data row, one of which was hidden and one shown, I now just have alternating blank and data rows in the top-level container. I don't think it affected my layout problem, but it cut out a layer and simplified the code.
The second change, suggested by all the responders, actually fixed the problem. Instead of having elements of type 'span' with display 'inline-block', I now use 'div', and a careful mix of 'float left' and 'float right' to achieve the layout I want.
Many thanks to all.
In order for overflow to have an effect, the block-level container must have either a set height ( height or max-height ) or white-space set to nowrap . Setting one axis to visible (the default) while setting the other to a different value results in visible behaving as auto . The JavaScript Element.
overflow:hidden prevents scrollbars from showing up, even when they're necessary. Explanation of your CSS: margin: 0 auto horizontally aligns the element at the center. overflow:hidden prevents scrollbars from appearing.
To change this, set the min-width or min-height property.” This means that a flex item with a long word won't shrink below its minimum content size. To fix this, we can either use an overflow value other than visible , or we can set min-width: 0 on the flex item.
The hidden value of the overflow property hides all the content that is exceeding the box area. This property should be handled with care because the content that this property hide is completely invisible to the user, however, it is best suited for displaying content that is dynamic in nature.
Let me explain to you why this is happening.
According to CSS 2.1 Specs,
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.
To explain in simple words,
i) If inline-block in question has its overflow property set to visible (which is by default so no need to set though). Then its baseline would be the baseline of the containing block of the line. ii) If inline-block in question has its overflow property set to OTHER THAN visible. Then its bottom margin would be on the baseline of the line of containing box.
So, in your case the inline-block cell
has overflow:hidden
(not VISIBLE), so its margin-bottom, the border of cell
is at the baseline of the container element container
.
That is why the element cell
looks pushed upwards and the height of container
appears increased. You can avoid that by setting cell
to display:block
.
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