CSS, Limit element to 2 lines of text. Issue on iPad

Question

I want to cut a div off after two lines of text. I've got that.

The issue is on the iPad where a div is taller if it has a removed line of text. How can I make them equal height, always?

Here's a demo http://jsfiddle.net/EgLRh/

It looks fine on desktop and iPhone. However the second green box is slightly taller when viewed on the 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

The only CSS way to combat this is to set a height to the containing divs

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

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

The reason for your problem is that the line is being taken into account as it does in fact exist, it just isn't being show. As a result of the you have the extra space being added.