Question

我使用此webkit线夹，它适用于Chrome，但不适用于Firefox。以下是代码：

{
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 */
}

我应该如何使它在Firefox上运行？

Answer 1

重要更新：

从 Firefox版本68 Firefox will support -webkit-line-clamp !!

开始

我可以验证-webkit-line-clamp当前是否适用于firefox nightly

演示片段（适用于每晚的firefox - 当然还有webkit）

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>

虽然Firefox使用Gecko rendering Engine使用-moz-供应商前缀，但是从版本49开始，Firefox decided to add support for several -webkit- prefixes和特定于WebKit的接口

注意： CSS Overflow Module Level 3 Editor's draft包含官方媒体资源line-clamp - 可能会取代专有的-webkit-line-clamp媒体资源。

原始答案

你做不到。 -webkit-line-clamp适用于使用webkit的浏览器。 Firefox在gecko上运行，并使用供应商前缀：-moz-

如果您有兴趣 - 可以查看my answer here：line-clamp with fade-out fallback fiddle，为非webkit浏览器添加淡出效果解决方法（而不是省略号）。

Answer 2

在firefox中，-webkit-line-clamp不能正常工作

这是一个工作正常的javascript代码 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
    }
})

Answer 3

/ ----线夹--- /

.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;
    }
}

/ ----线夹端--- /

Answer 4

{
    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*/
}

它适用于chrome，ff，即edge

为什么webkit行绑定在firefox中不起作用？

4 个答案:

重要更新：

原始答案