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

请看一下这把小提琴-

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

如果传递到文本节点的文本超过宽度，我希望它被截断，因此我将单元格设置为“overflow:hidden”

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

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

我已经在IE8和Chrome上进行了测试，得到了相同的结果

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

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

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

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

这（但愿）是我的最后一把小提琴-

它融合了所有响应者的想法，现在可以按照我的要求工作了

主要有两个变化

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

所有响应者建议的第二个改变实际上解决了这个问题。我现在使用“div”以及“float left”和“float right”的小心组合来实现我想要的布局，而不是使用带有“inline block”显示的“span”类型的元素

---

非常感谢大家。

尝试为容器设置

行高：0

，为单元格设置

行高：20px

container.style.lineHeight = '0px';

cell.style.lineHeight = '20px';

cell.style.float = 'left';

或者可以在单元格上使用

float:left

container.style.lineHeight = '0px';

cell.style.lineHeight = '20px';

cell.style.float = 'left';

---

使用单元的dsiplay“块”

cell.style.display = 'block';

及

---

要向左对齐，如果要对齐

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

根据,

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

简单地说,

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

因此，在您的例子中，内联块

单元格

具有

溢出：隐藏（不可见），因此其边距底部，
单元格
的边框位于容器元素
容器
的基线处

这就是为什么元素
单元格
看起来向上推，而
容器
的高度似乎增加了。通过将
cell
设置为
display:block
可以避免这种情况，溢出属性可以更改元素的基线。要防止出现这种情况，可以在内联块上使用垂直对齐

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

谢谢您的回复，Mathias和Niles。您的建议适用于我的简单示例，但我的实际程序还有多个层，它们在那里并不完美。我会继续调查，并向你汇报。你能举一个例子说明你的整个布局有什么问题吗。只是HTML和CSS。不确定这里的礼仪是否正确，但我已经编辑了我的原始帖子，并添加了一个新的提琴和一个更完整的例子。你考虑过使用表格吗？你好像在做一张桌子谢谢Mathias。我很感激你花了这么多时间和精力来解决这个问题。我最终没有使用它，但它为我指明了正确的方向。我附上了一把新的小提琴，现在它可以按照我想要的方式工作了。谢谢你的解释。正如@Niles所建议的，我尝试了“display:block”，它适用于我的简单示例。不幸的是，在我刚刚发布的更完整的示例中，它不起作用。有时一个单元格包含多个元素。如果我将“inline-block”改为“block”，它们将垂直排列，而不是水平排列。但是如果使用display:block，它将占据整行。您不能像这样从“内联块”切换到“块”。如果它有一个固定的宽度，是的，但否则，这根本不起作用。此问题未解决。这可能有帮助：
垂直对齐：顶部似乎工作得更好，如垂直对齐：子；为我工作。顶部和底部都没有。我不知道为什么。一旦这个答案接近我，我就开始尝试。下面是一个完整的例子：如果你正在运行程序，你可以在源代码中搜索“垂直对齐”或寻找正确的移动箭头。