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

Posted 2023-04-18

【中文标题】css溢出隐藏增加了容器的高度

【英文标题】：css overflow hidden increases height of container

【发布时间】：2014-04-20 17:38:16

【问题描述】：

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

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

如果传递给文本节点的文本超过宽度，我希望它被截断，所以我将单元格设置为“溢出：隐藏”。

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

因为我有很多电子表格样式的单元格，所以布局混乱。

我在 IE8 和 Chrome 上测试过，结果相同。

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

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

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

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

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

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

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

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

有两个主要变化。

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

所有响应者建议的第二个更改实际上解决了问题。我现在使用 'div' 并仔细混合 'float left' 和 'float right' 来实现我想要的布局，而不是使用带有 display 'inline-block' 的 'span' 类型的元素。

非常感谢大家。

【问题讨论】：

感谢 Mathias 和 Niles 的回复。您的建议适用于我的简单示例，但我的实际程序还有更多层，它们在那里无法完美运行。我将继续调查并报告。

你能举一个例子来说明你的完整布局有什么问题吗？只是 html 和 CSS。

不确定这里的正确礼仪，但我已经编辑了我的原始帖子并添加了一个新的小提琴，其中包含一个更完整的示例。

您考虑过使用桌子吗？好像您正在创建一个表jsfiddle.net/borglinm/fA3wy/3

谢谢，马蒂亚斯。我很感激你花时间和麻烦来想出那个。我最终没有使用它，但它为我指明了正确的方向。我附上了一个新的小提琴，现在可以按我想要的方式工作。

【参考方案1】：

让我解释一下为什么会这样。

根据CSS 2.1 Specs，

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

简单来说，

i) 如果有问题的 inline-block 将其溢出属性设置为可见（默认情况下不需要设置）。那么它的基线将是该行的包含块的基线。 ii) 如果有问题的 inline-block 将其溢出属性设置为 OTHER THAN 可见。那么它的下边距将位于包含框行的基线上。

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

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

【讨论】：

感谢您的解释。正如@Niles 所建议的那样，我尝试了'display：block'，它适用于我的简单示例。不幸的是，它在我刚刚发布的更完整的示例中不起作用。有时一个单元格包含多个元素。如果我将“inline-block”更改为“block”，它们将垂直而不是水平布局。

但是如果你使用display:block，它会占据整行。你不能像这样从“inline-block”切换到“block”。如果它具有固定宽度，是的，否则，这根本行不通。这个问题没有解决。

这可能会有所帮助：***.com/questions/20310690/…

【参考方案2】：

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

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

http://jsfiddle.net/23e0rny9/

【讨论】：

vertical-align: top; 似乎按照***.com/questions/20310690/…的建议工作得更好

垂直对齐：子；为我工作。顶部和底部没有。我不确定为什么。一旦这个答案让我接近，我就开始尝试了。

这里是完整的例子：trade-ideas.com/home/phil/Triangles/HeapSort.html 如果您正在运行程序，您可以搜索“vertical-align”的来源或寻找向右移动的箭头。

【参考方案3】：

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

container.style.lineHeight = '0px';

cell.style.lineHeight = '20px';

Fiddle

或者你可以在你的单元格上使用float: left

cell.style.float = 'left';

Fiddle2

【参考方案4】：

使用单元格的 dsiplay 'block'

cell.style.display = 'block';

和

cell.style.float= 'left';

如果要对齐，左对齐