javascript css溢出隐藏增加了容器的高度

css overflow hidden increases height of container

提问by Frank Millman

Please have a look at this fiddle - http://jsfiddle.net/Z27hC/

请看看这个小提琴 - 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.

它有效，但它会导致单元格的高度增加 3px。单元格有边框，但增加的高度出现在边框下方，而不是边框​​内部。

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.

我在 IE8 和 Chrome 上对此进行了测试，结果相同。

Any of the following solutions would be ok -

以下任何解决方案都可以 -

• prevent the increased height from occurring
• keep the increased height inside the border
• another way to truncate the text

• 防止高度增加的发生
• 将增加的高度保持在边界内
• 另一种截断文本的方法

As requested, here is a new fiddle that shows a more complete example.

根据要求，这是一个新的小提琴，显示了一个更完整的示例。

http://jsfiddle.net/frankmillman/fA3wy/

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/

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.

第一个灵感来自 Mathias 的表格解决方案。而不是包含一个空白行和一个数据行的中间容器，其中一个被隐藏，一个被显示，我现在在顶级容器中只有交替的空白行和数据行。我不认为它影响了我的布局问题，但它剪掉了一个图层并简化了代码。

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.

所有响应者建议的第二个更改实际上解决了问题。我现在不再使用带有“inline-block”显示的“span”类型的元素，而是使用“div”和“向左浮动”和“向右浮动”的仔细组合来实现我想要的布局。

Many thanks to all.

非常感谢大家。

回答by Sreeja Das

Let me explain to you why this is happening.

让我向您解释为什么会发生这种情况。

According to CSS 2.1 Specs,

根据CSS 2.1 规范，

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.

'inline-block' 的基线是它在正常流中的最后一个 line box 的基线，除非它没有 in-flow line box 或者它的 'overflow' 属性的计算值不是 'visible'，在在这种情况下，基线是底部边距边缘。

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.

i) 如果有问题的内联块将其溢出属性设置为可见（默认情况下，因此无需设置）。那么它的基线将是该行包含块的基线。ii) 如果有问题的内联块的溢出属性设置为其他可见。那么它的底部边距将在包含框线的基线上。

So, in your case the inline-block cellhas overflow:hidden(not VISIBLE), so its margin-bottom, the border of cellis at the baseline of the container element container.

因此，在您的情况下，内联块cell具有overflow:hidden（不可见），因此它的边距底部，其边界cell位于容器元素的基线处container。

That is why the element celllooks pushed upwards and the height of containerappears increased. You can avoid that by setting cellto display:block.

这就是为什么元素cell看起来向上推并且高度container看起来增加的原因。您可以通过设置cell为来避免这种情况display:block。

回答by M81

The overflow-property can change the baseline of an element. To prevent this you can use vertical-align on inline-blocks.

溢出属性可以改变元素的基线。为了防止这种情况，您可以在内联块上使用垂直对齐。

cell.style.display = 'inline-block';
cell.style.overflow = 'hidden';
cell.style.verticalAlign = 'bottom';

http://jsfiddle.net/23e0rny9/

http://jsfiddle.net/23e0rny9/

回答by Mathias

Try setting line-height: 0for the container and line-height: 20pxfor your cells

尝试设置line-height: 0容器和line-height: 20px单元格

container.style.lineHeight = '0px';

cell.style.lineHeight = '20px';

Fiddle

小提琴

Or you can use float: lefton your cells

或者你可以float: left在你的细胞上使用

cell.style.float = 'left';

Fiddle2

小提琴2

回答by Nilesh Nartam

use the dsiplay 'block' of cell

使用单元格的显示“块”

cell.style.display = 'block';

and

和

cell.style.float= 'left';

to align left if you want to align

如果要对齐，请向左对齐