Why webkit line clamping does not work in firefox?

Why webkit line clamping does not work in firefox?

line-clamp css for all browser
line-clamp mdn
angular line-clamp
css webkit-line-clamp not working
react webkit-line-clamp
jquery line-clamp
line-clamp read more
line-clamp 2019

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?


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>

-webkit-line-clamp - CSS: Cascading Style Sheets, The -webkit-line-clamp CSS property allows limiting of the contents of a property was originally implemented in WebKit and has some issues. { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } I've looked at many posts about this and many of them are hacky solutions which would probably not work if a user changes his/her browser view settings like font-size. Is there a css alternative for this in IE 11?


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
    }
})

866102, Workaround for this bug is slower on Firefox. [selena] facebook is planning to enable this soon, and frmr Mozillians gave us the heads up. Also, multiple top and  The -webkit-line-clamp CSS property allows limiting of the contents of a block container to the specified number of lines. It only works in combination with the display property set to -webkit-box or -webkit-inline-box and the -webkit-box-orient property set to vertical. In most cases you will also want to set overflow to hidden, otherwise the


/----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---/

-webkit-line-clamp, , the default iOS browser, and the default Android browser. For more information about WebKit, visit the WebKit website. Thanks Tab. Given how much usage of -webkit-line-clamp there is, it's really only (1) that I consider urgent here. Even though it's not ideal and we might not choose to ship such a new API now without also doing (2), that ship has effectively sailed - might as well document and test that as a first step, then (if it's important enough) iterate on improving and extending it.


{
    overflow:hidden;
    text-overflow: ellipsis;    
    display: -webkit-box;    
    -webkit-line-clamp: 3;
    /* number-of lines */    
    -webkit-box-orient: vertical; 
    word-wrap:break-word;    
    line-height:1.2; 
    /* line-height for 1line*/    
    max-height:3.6rem; 
    /* line-height * 3*/
}

it works fine with chrome, ff, ie, edge

webkit css support which browsers?, 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;  As of right now, it's browser support. Line clamps are part of the CSS Overflow Module Level 3 which is currently in Editor's Draft and totally unsupported at the moment. We can get some line clamping action with a -webkit- prefix (which, weirdly enough, works across all major browsers). In fact, that's how the demo above was done.


What is WebKit?, The line-clamp property truncates text at a specific number of lines. It's easy to see how max-lines would be nixed since it's function (setting the But what if we want to introduce the ellipsis not on the first line but somewhere, Firefox supports this now, exactly this way (with the -webkit- prefixes and all). Why webkit line clamping does not work in firefox? Ask Question Asked 6 years, 2 months ago. Active 6 days ago. In firefox, -webkit-line-clamp don't work.


Why webkit line clamping does not work in firefox?, Proprietary and undocumented CSS property that will contain text to a given amount of lines when used in combination with display: -webkit-box . It will end with  Sometimes, the video or audio content in a web page cannot be properly downloaded and displayed in Firefox. This article will help you solve these problems. Note: If you're having trouble with a website, click the icon in the address bar to see if Firefox has blocked parts of the page that are not secure. See Mixed content blocking in Firefox


line-clamp, Feature: CSS line-clamp Proprietary and undocumented CSS property that will contain text to a given amount of lines when used in combination with display: Firefox for Android Notes; Known issues (0); Resources (3); Feedback. The -moz-appearance CSS property is used in Gecko (Firefox) to display an element using platform-native styling based on the operating system's theme.. The -webkit-appearance property is used by WebKit-based (e.g., Safari) and Blink-based (e.g., Chrome, Opera) browsers to achieve the same thing.