CSS line-height not the same in Firefox and Chrome

Question

Goal: Just show the first four lines in a text box.

I tested JSFiddle Demo with Chrome 43.0.2357.132 (64-bit) and Firefox 39 and in Chrome the text box shows perfectly the first 4 lines (remaining lines are hidden) whereas in Firefox the line-height appears larger, therefore the fourth line got cut.

How can I solve this with CSS?

.txt {
    width:300px;
    height:48px;
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;
}

<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>

Answer 1

You could explicitly set the line-height.

line-height: 1.2;

Working Example (JSFiddle):

.txt {
    width:300px;
    height:48px;
    overflow:hidden;
    border-bottom-style:solid;
    border-bottom-width:1px;
    border-bottom-color:#aaaaaa;
    margin-bottom:2em;
    font-size:0.8em;
    line-height: 1.2;
}

<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>

It appears Firefox has a default line-height of 1.1, but Chrome has a default line-height of 1.2.

Answer 2

In general the default line-height value is normal, on MDN it says:

normal - Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2, depending on the element's font-family.

To fix the inconsistency results from different browsers, you could try apply a number or length or percentage value for it, also specify a web-safe font for font-family.

Also see this related post - jQuery/CSS: line-height of “normal” == ?px

.txt {
    width:300px;
    height:47px;
    overflow:hidden;
    border-bottom:1px solid #aaa;
    margin-bottom:2em;
    font-size:0.8em;
    font-family:arial; /*new*/
    line-height:1.2; /*new*/
}

<div class="txt">
    This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. This is just a temporary text. 
</div>