CSS line-height not the same in Firefox and Chrome -


goal: show first 4 lines in text box.

i tested jsfiddle demo chrome 43.0.2357.132 (64-bit) , firefox 39 , in chrome text box shows first 4 lines (remaining lines hidden) whereas in firefox line-height appears larger, therefore fourth line got cut.

how can solve 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">      temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text.   </div>

you explicitly set 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">      temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text. temporary text.   </div>

it appears firefox has default line-height of 1.1, chrome has default line-height of 1.2.


Comments

Popular posts from this blog

searchKeyword not working in AngularJS filter -

sequelize.js - Sequelize: sort by enum cases -

user interface - how to replace an ongoing process of image capture from another process call over the same ImageLabel in python's GUI TKinter -