Why webkit line clamping does not work in firefox?

Question

I use this webkit line clamp, it works in Chrome, but not in Firefox. The following is the code:

{   overflow: hidden;   text-overflow: ellipsis;   display: -webkit-box;   -webkit-box-orient: vertical;   -webkit-line-clamp: 4; /* number of lines to show */   line-height: X; /* fallback */   max-height: X * 4; /* fallback */ } 

How should I make it work on Firefox as well?

Answer 1

Important Update:

As of Firefox version 68 Firefox supports -webkit-line-clamp!!

Demo snippet (caniuse)

p {    width: 300px;    border: 2px solid green;    padding: 0.5em 0.5em 0 0.5em;    overflow: hidden;    text-overflow: ellipsis;    display: -webkit-box;    -webkit-box-orient: vertical;    -webkit-line-clamp: 3; /* number of lines to show */  }

<p>When the CSS -webkit-line-clamp property is applied to a block of text (e.g., a paragraph), the text is limited to the specified number of lines (1 or more), and an ellipsis character (…) is added to the end of the last visible line. - see <a href="https://webplatform.news/issues/2019-05-17">webplatform.news</a>

Although Firefox uses the Gecko rendering Engine which uses the -moz- vendor prefix, since version 49, Firefox decided to add support for several -webkit- prefixes and WebKit-specific interfaces

Note: CSS Overflow Module Level 3 Editor's draft includes an official property line-clamp - which will likely replace the proprietary-webkit-line-clamp property.

Original Answer

You can't. -webkit-line-clamp is for browsers that use webkit. Firefox runs on gecko and uses the vendor prefix: -moz-

If you're interested - you could take a look at my answer here: a line-clamp with fade-out fallback fiddle which adds a fade-out effect workaround (instead of ellipsis) for non-webkit browsers.