css溢出隐藏增加容器的高度-cssoverflowhiddenincreasesheightofcontainer

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

如果传递给文本节点的文本超出宽度，我希望它被截断，所以我将单元格设置为'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.

所有响应者建议的第二个变化实际上解决了这个问题。我没有使用显示'内联块'的'span'类型的元素，而是使用'div'，并小心地混合'float left'和'float right'来实现我想要的布局。

Many thanks to all.

非常感谢大家。

4 个解决方案

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

container.style.lineHeight = '0px';

cell.style.lineHeight = '20px';

cell.style.float = 'left';

cell.style.display = 'block';

cell.style.float= 'left';