Why webkit line clamping does not work in firefox?

user_1097963 0
Viewed 51769

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?

firefox css html
5 Answers

/----line clamp---/

.line-clamp {
    position: relative;
    height: 2.7em; 
    overflow: hidden;
}
.line-clamp:after {
    background: $white;
    bottom: 0;
    position: absolute;
    right: 0;
    float: right;
    content: '\2026';
    margin-left: -3rem;
    width: 1rem;
}

@supports (-webkit-line-clamp: 2) {
    .line-clamp {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        / autoprefixer: off /
        -webkit-box-orient: vertical; 
        / autoprefixer: on /
        max-height:3.6em; 
        height: auto;
    }
    .line-clamp:after {
        display: none;
    }
}

/----line clamp end---/

user_109538670

In firefox, -webkit-line-clamp don't work

Here a javascript code that works fine
http://codepen.io/nilsynils/pen/zKNpkm?editors=1111

const containers = document.querySelectorAll('.container');
Array.prototype.forEach.call(containers, (container) => {  // Loop through each container
    var p = container.querySelector('p');
    var divh = container.clientHeight;
    while (p.offsetHeight > divh) { // Check if the paragraph's height is taller than the container's height. If it is:
        p.textContent = p.textContent.replace(/\W*\s(\S)*$/, '...'); // add an ellipsis at the last shown space
    }
})
user_81330930

I just face thisi issue on latest Firefox with TailwindCSS and I fixed it by following code:

[class*="line-clamp-"]:not(.line-clamp-none) * {
    display: inline !important;
}
user_12279260
Related