CSS，将元素限制为2行文本。在iPad上发行

Question

我想在两行文字之后剪掉一个div。我有这个。

问题是在iPad上，如果删除了一行文本，则div更高。我怎么能总是让它们高度相等？

这是一个演示http://jsfiddle.net/EgLRh/

在桌面和iPhone上看起来很好。然而，当在iPad上观看时，第二个绿色盒子略高。

    div{
    float:left;  
    width:100px;
    background:green;
    overflow: hidden;
    text-align: center;
    margin:5px;
}

a{
    overflow: hidden;
    min-height: 2.4em;
    max-height: 2.4em;
    line-height: 1.2em;
    display:inline-block;
}

<div>
    <a>I fit on two lines. See!</a>
</div>

<div>
    <a>I do not fit on two lines so I am cut off. Cut off!</a>
</div>

Answer 1

解决此问题的唯一方法是将高度设置为包含div s

DEMO http://jsfiddle.net/EgLRh/5/

div{
    float:left;  
    width:100px;
    background:green;
    overflow: hidden;
    text-align: center;
    margin:5px;
    height:40px;
}

你的问题的原因是这条线被考虑在内，因为它确实存在，它只是没有显示。由于你有额外的空间被添加。