无法隐藏带溢出的标题：隐藏;和转换：翻译：-100％;

Question

我想隐藏带有overflow: hidden的容器之外的标题：

HTML：

<div>
  <h1>Heading</h1>
</div>

CSS：

div {
  overflow: hidden;
}
h1 {
  transform: translateY(100%);
}

http://codepen.io/Deka87/pen/jBYXre

然而，这会使部分标题可见。有什么想法吗？

Answer 1

它没有完全隐藏的原因是因为h1的上下边距不考虑100%偏移量

您可以尝试设置margin: 0

Answer 2

使用translateX代替translateY

http://codepen.io/anon/pen/NpXedB

或者使用200％而不是100％（还可以将其移到填充等之外）：

http://codepen.io/anon/pen/XMVoMr

Answer 3

如果没有更多的上下文，很难说肯定，但你的方法似乎可能不是最具语义性或最可靠的（如果div或标题的维度改变它可能导致标题变为再次可见（这仍然是我见过的其他解决方案的风险）

假设您暂时隐藏了h1，您可以考虑在div上使用visibility:hidden;，或者隐藏元素的h1本身，同时在DOM中保留它的维度（因此任何依赖于它的布局都是不变）。

http://codepen.io/anon/pen/WpdLXY