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

Question

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

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

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

Answer 1

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

字体大小对应于排版中使用的概念“em square”。 请注意，某些字形可能会在其全角方形之外出血。

line-height: 1

声明将段落的高度设置为与

font-size

相同的高度（因为该段落只有一行）。 一些字符被切断的事实意味着它们的字形在它们的em方块之外渗出（我不知道如何明确地证明这是真的；我只是根据证据推测）。

至于解决方案，最直接的解决方案是使用更大的

line-height

设置，例如 1.1 或 1.2。

Answer 2

有点黑客行为，但应用

padding-bottom

然后用负值

margin-bottom

来抵消效果似乎效果很好。

所需填充的大小取决于字体大小以及使用的字体，但我使用了

0.3em

，它似乎至少与我们当前使用的字体配合得很好。

div {
  overflow: hidden;
  line-height: 1;
  margin-bottom: -0.3em;
  padding-bottom: 0.3em;
}

<div>testing...</div>
<div>yjqgp</div>
<div>YJQGP</div>

Answer 3

你可以在CSS中设置

height

来解决这个问题吗？

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/