css overflow hidden增加容器的高度 [英] css overflow hidden increases height of container

问题描述

请查看这个小提琴 - http://jsfiddle.net/Z27hC/

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.

如果传递到文本节点的文本超过了宽度，我想将其截断，因此我将单元格设置为overflow：隐藏。

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'.

它工作，但它会导致单元格的高度增加3px。单元格有边框，但是增加的高度显示在边框下方，而不在其内。

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.

我已经在IE8和Chrome上测试过这个结果，结果相同。

I have tested this on IE8 and Chrome, with the same result.

• 防止发生高度增加


• 保持边框内增加的高度


• 另一种方式截断文本

更完整的例子。

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

我希望它不言自明。

这是（希望）我的最后一个小提琴 -

Here is (hopefully) my final fiddle -

http://jsfiddle.net/frankmillman/RZQQ8/

有两个主要的变化。

第一个是受Mathias表解决方案的启发。而不是一个中间容器，包含一个空白行和一个数据行，其中一个被隐藏，显示一个，我现在只有交替的空白和数据行在顶层容器。我不认为它影响了我的布局问题，但它切出一层和简化的代码。

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.

第二个变化，由所有的响应者建议，实际上固定问题。而不是具有'span'类型的显示'inline-block'的元素，我现在使用'div'，并仔细混合'float left'和'float right'，以实现我想要的布局。

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.

非常感谢所有人。

推荐答案

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

Let me explain to you why this is happening.

根据 CSS 2.1规范，

inline-block的基线是正常流程中最后一行框的基线，除非它没有流入线框或者如果它的overflow属性具有除了visible之外的计算值，在这种情况下，基线是底部边缘。

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.

用简单的话解释，

i）如果inline-block有overflow属性设置为visible这是默认情况下，所以不需要设置）。然后其基线将是线的包含块的基线。
ii）如果有问题的inline-block的overflow属性设置为OTHER THAN visible。

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.

因此，在你的情况下，inline-block 单元格有 overflow：hidden （不可见），因此其边距为底部，单元格在容器元素 container 的基线。

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.

这就是为什么元素 cell 看起来向上推， container 的高度增加。您可以通过将单元格设置为 display：block 来避免这种情况。

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.

这篇关于css overflow hidden增加容器的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！