Question

请看一下这个小提琴 - 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);

我有一个容器，包含一个包含文本节点的单元格。单元格具有固定的宽度。

如果传递给文本节点的文本超出了宽度，我希望它被截断，所以我将单元格设置为'overflow：hidden'。

它有效，但它会使细胞的高度增加3px。单元格有边框，但增加的高度显示在边框下方，而不是在其内部。

由于我在电子表格样式中有许多单元格，因此会弄乱布局。

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

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

防止高度增加
在边框内保持增加的高度
截断文字的另一种方法

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

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

我希望它不言自明。如果您需要更详细的解释，请告诉我。

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

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

它融合了所有响应者的想法，现在可以按照我的意愿运作。

主要有两个变化。

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

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

非常感谢所有人。

Answer 1

让我向你解释为什么会这样。

根据CSS 2.1 Specs，

“内联块”的基线是正常流程中其最后一个线框的基线，除非它没有流入线框或者其“溢出”属性的计算值不是“可见” '，在这种情况下，基线是底部边缘边缘。

用简单的话来解释，

i）如果有问题的内联块将其溢出属性设置为可见（默认情况下不需要设置）。然后它的基线将是该线的包含块的基线。 ii）如果有问题的内联块的溢出属性设置为OTHER可见。然后它的底部边距将位于包含框的行的基线上。

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

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

Answer 2

overflow-property可以更改元素的基线。为防止这种情况，您可以在内联块上使用vertical-align。

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

http://jsfiddle.net/23e0rny9/

Answer 3

尝试为容器设置line-height: 0，为您的单元设置line-height: 20px

container.style.lineHeight = '0px';

cell.style.lineHeight = '20px';

<强> Fiddle

或者你可以在你的手机上使用float: left

cell.style.float = 'left';

<强> Fiddle2

Answer 4

使用显示屏＆＃39;块＆＃39;细胞

cell.style.display = 'block';

和

cell.style.float= 'left';

如果要对齐

，则左对齐

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

4 个答案: