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/

Answer 1

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.