18

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>

Improve this question
1
  • Is the default font-size on all browsers the same? You set a height in px, but a font-size in em. You might want to declare the line-height to (making it overrule any default value, if given). Commented Jul 13, 2015 at 14:43

5 Answers 5

Reset to default
8

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

This worked for me only, if I also declared Arial as font for body, it seems that Firefox39 chooses Helvetica as default font?
Setting the line-height explicitly (as I do this anyhow) didn’t help for me. There IS definitely a difference between the result in Firefox and Safari. I.g. line-height: 1.5em; does not end up in the same pixel reality on both browsers.
It seems that the difference becomes more notable on smaller font sizes. It helped to use absolute pixel values instead. Weird.
At the time of writing (2020), you may get different results on Firefox and Chrome, even if you explicitly set font-size in px and line-height to a multiplier. This is a known bug in Chrome - bugs.chromium.org/p/chromium/issues/detail?id=1023654. Firefox will multiply the two values and retain any fractional pixel, whereas Chrome will round down to the nearest integer pixel. For example, if you render <p style='font-size: 14px; line-height: 1.75;'>Text</p> on both browsers you will get 24.5px on Firefox and 24px on Chrome.
JSFiddle - jsfiddle.net/8f3mb4kw - in Chrome, inspect the paragraph with DevTools, go to the Computed tab, and you will see line-height: 24.5px and height: 24px. The rounding should not be occurring.
6

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>

Improve this answer

Comments

1

Line-height is only part of the solution.

As the other answers state, it varies by browser and you will want to set the value for greater consistency. My suggestion is to use em values.

Secondly, you will want the height of your container to be a multiple of the line-height. So, if you want a container that is 4 lines high and your line-height is 1.2em, then you will want a container height of 4.8em (1.2em x 4 lines).

.txt { width:300px; height:4.8em; /*4x the line-height to show 4 lines that are not cropped */ overflow:hidden; border-bottom-style:solid; border-bottom-width:1px; border-bottom-color:#aaaaaa; margin-bottom:2em; font-size:0.8em; line-height:1.2em; /* set a relative line height */ }
<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>

Improve this answer

Comments

0

Each browser has a different default font-family, so you should specify the font-family.

.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; font-family: tahoma; }
Improve this answer

Comments

0

You can add line height code for mozilla using:

 @-moz-document url-prefix() { *,body{ line-height: as per your requirement; } }
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.