Html 为什么 webkit 线路钳位在 Firefox 中不起作用？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20594995/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why webkit line clamping does not work in firefox?
提问by uklp
I use this webkit line clamp, it works in Chrome, but not in Firefox. The following is the code:
我使用这个 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 */
}
How should I make it work on Firefox as well?
我应该如何使它也能在 Firefox 上运行？
回答by Danield
Important Update:
重要更新：
As of Firefox version 68Firefox supports -webkit-line-clamp!!
从Firefox 版本 68 开始，Firefox 支持-webkit-line-clamp！！
Demo snippet(caniuse)
演示片段（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 Enginewhich uses the -moz-vendor prefix, since version 49, Firefox decided to add support for several -webkit-prefixesand WebKit-specific interfaces
尽管 Firefox 使用使用供应商前缀的Gecko 渲染引擎-moz-，但从版本 49 开始，Firefox 决定添加对几个-webkit-前缀和 WebKit 特定接口的支持
Note:CSS Overflow Module Level 3 Editor's draftincludes an official property line-clamp- which will likely replace the proprietary-webkit-line-clampproperty.
注意：CSS 溢出模块第 3 级编辑器的草稿包括一个官方属性线夹——它可能会取代专有-webkit-line-clamp属性。
Original Answer
原答案
You can't. -webkit-line-clampis for browsers that use webkit. Firefox runs on geckoand uses the vendor prefix: -moz-
你不能。-webkit-line-clamp适用于使用 webkit 的浏览器。Firefox 在gecko 上运行并使用供应商前缀：-moz-
If you're interested - you could take a look at my answer here: a line-clamp with fade-out fallback fiddlewhich adds a fade-out effect workaround (instead of ellipsis) for non-webkit browsers.
如果您有兴趣 - 您可以在这里查看我的答案：带有淡出后备小提琴的线夹，它为非 webkit 浏览器添加了淡出效果解决方法（而不是省略号）。
回答by Lsb
In firefox, -webkit-line-clamp don't work
在 Firefox 中，-webkit-line-clamp 不起作用
Here a javascript code that works fine
http://codepen.io/nilsynils/pen/zKNpkm?editors=1111
这是一个运行良好的 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
}
})
回答by Snehal Jadhav
/----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: '26';
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---/
/ ----线夹端---/
回答by Stella Park
{
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
它适用于 chrome，ff，即边缘
