How to 'hide' :first-line for white-space:pre-line in FIREFOX browser

Question

When I use

white-space: pre-line;
word-break: break-word;

...there is one additionl line before text. To hide it, I used:

.class:first-line { line-height: 0; }

...and it is working in Chrome browser, but not in the Firefox.

Here is a working fiddle and please open it in Firefox : https://jsfiddle.net/t3qj51co/2/

@NielsKeurentjes k :) I see that you removed p.s part also.. thank you. — Dejan Munjiza, Jan 18 '16 at 15:22

Gabriele Petrioli · Accepted Answer · 2016-01-18T15:41:50.710

24

Why not just fix your HTML (demo)

The problem is that in your html you have an empty line. Since you use pre-line it takes that into account as well.

Just removing the empty line fixes it.

The issue is that firefox does not allow to decrease the line-height more than the currently active one.

At first this looks like a Firefox bug (it works as described in the OP in Chrome, IE, Safari).
But reading the specification i see that it is open to interpretation as it says that

This paragraph might be "rewritten" by user agents to include the fictional tag sequence for ::first-line. This fictional tag sequence helps to show how properties are inherited.

If a UA follows this approach then it is valid to not decrease the visual height of the line, as it only applies to the "fictional tag". (a nested tag cannot influence the line-height of its container downwards)

So not sure if it is an actual bug (on either spectrum of browsers) or a valid difference in implementations.

edited Jan 18 '16 at 15:41

answered Jan 18 '16 at 15:01

Gabriele Petrioli

191,379
34
261
317

Hehe I like this one :) – Dejan Munjiza Jan 18 '16 at 15:11
@DejanMunjiza Besides that, it looks like a bug on firefox that does not allow a `line-height` of less than the inherited one (*which applies to the rest of the element*) – Gabriele Petrioli Jan 18 '16 at 15:14
Yes, I decided to leave question for some time and see if someone maybe have some 'workaround' for this Firefox issue. You will definitely get credit since this helped me. – Dejan Munjiza Jan 18 '16 at 15:16
If you have to allow free text that might have new lines at the top, then i would use some JS to trim empty lines from the beginning of element. – Gabriele Petrioli Jan 18 '16 at 15:18
If you have a moment, please provide a quick example link with js solution. – Dejan Munjiza Jan 18 '16 at 15:20
3

See https://jsfiddle.net/gaby/t3qj51co/4/ (*it removes all leading whitespace. It will remove more than one empty lines if they exist at the start*) – Gabriele Petrioli Jan 18 '16 at 15:33
Thank you Gaby. This will help me in future I believe. – Dejan Munjiza Jan 18 '16 at 20:58

Antonio Ooi · Answer 2 · 2021-12-27T10:09:23.103

0

Just write your HTML like this:

<div class="test">Don't press a carriage return after an opening div and continue typing....

This is the next paragraph and at the end, just close the div like this.</div>

If you use template code, just do like this:

<div class="test">{{{MustacheDataHere}}}</div>

No need to put this .test:first-line { line-height: 0; } in your .test class. Refer to this answer for more info.

edited Dec 27 '21 at 10:09

answered Dec 27 '21 at 10:03

Antonio Ooi

1,601
1
18
32

Mehvix · Answer 3 · 2022-10-26T19:35:58.790

I was able to botch my way to obtain the same results in FF and Chrome by adding a negative margin; see the content in .new:

.class {
  white-space: pre-line;
}

.class::first-line {
  line-height: 0;
}

.new:before {
  content: '';
  margin: -1.5em 0;
  display: block;
}

<hr>
<div class='class'>
    line #1
    line #2
    line #3
</div>
<hr>
<div class='class new'>
    line #1
    line #2
    line #3
</div>

Chrome	Firefox

How to 'hide' :first-line for white-space:pre-line in FIREFOX browser

3 Answers3