title: CSS line-height not the same in Firefox and Chrome
body: <p>Goal: Just show the first four lines in a text box.  </p>
  
  <p>I tested <a href="https://jsfiddle.net/utcvwucs/5/" rel="noreferrer">JSFiddle Demo</a> 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 <code>line-height</code> appears larger, therefore the fourth line got cut.</p>
  
  <p>How can I solve this with CSS?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="txt"&gt;
      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. 
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>