overflow - 使用溢出时的文本裁剪：隐藏

Question

我有这个简单的 html 和 css http://jsfiddle.net/JVfVv/1/

问题是文本在 mac 上的 safari/chrome/firefox 下被裁剪。删除 overflow: hidden 可以解决问题，但是出于其他原因，此行是必要的。删除行高：1；似乎解决了这个问题，但是我从我的重置样式表中得到了这个，我不明白为什么它会导致作物。

有人可以解释为什么会发生这种情况，以及如何解决它吗？谢谢

Answer 1

要回答为什么会发生这种情况的问题，我认为关键是 CSS 2.1 规范的字体部分中的这个特定短语（强调我的）：

字体大小对应于 em 方格，这是排版中使用的一个概念。请注意，某些字形可能会在它们的 em 方格之外流血。

该line-height: 1声明将段落的高度设置为与 相同的高度font-size（因为该段落只有一行）。某些字符被切断的事实意味着他们的字形在他们的 em 方格之外流血（我不知道如何明确证明这是真的；我只是根据证据推测）。

至于解决方案，最直接的解决方案是使用更大的line-height设置，例如 1.1 或 1.2。

Answer 2

你可以设置height解决问题的CSS吗？

p {
    line-height: 1;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial; font-size: 30px;
    height:32px; /* this appears to solve the problem */
}​

见：http: //jsfiddle.net/JVfVv/4/