Text overflow only not works in firefox

Question

The truncated text in a paragraph just not working in Firefox. Any idea?

Chrome

Firefox

    display: -webkit-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 5;
    line-height: 1.3em !important;
    height: 5.6em !important;
    margin-bottom: 60px;

Answer 1

try this

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
-moz-binding: url('ellipsis.xml#ellipsis');
display: block;

The Qwertiy suggestion is a good way to resolve that. I made an example: https://jsfiddle.net/3xb23suk/1/

Answer 2

The code you are using is based on obsolete -webkit-box display. Only webkit-based browsers support it. If you want to support Opera 12, you can use text-overflow: -o-ellipsis-lastline on normal block. All other browsers have no any functionality allowing to make multiline ellipsis.

You have to write a script for measuring the text and cropping it somehow.

The other possible way is to show a gradient instead of ellipsis.