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
Post a Comment