CSS 没有“-webkit-line-clamp”的夹紧线

Clamping lines without '-webkit-line-clamp'

提问by shabunc

In the good old days, there existed a trick in webkit for clamping lines using pure css:

在过去的美好时光中，webkit 中存在一个使用纯 css 夹紧线的技巧：

display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;

Though this syntax happily coexists with the display: -webkit-flexsyntax, in all modern webkit-based browsers, it is considered obsolete.

尽管此语法与语法愉快地共存，但display: -webkit-flex在所有基于 webkit 的现代浏览器中，它被认为已过时。

My question is:

我的问题是：

How can I achieve line clamping in pure CSS and without the obsolete '-webkit-line-clamp'trick?

如何在没有过时'-webkit-line-clamp'技巧的情况下在纯 CSS 中实现线钳位？

回答by Jethro Larson

The only cross-browser solution is to use js afaik. Several solutions to the problem of multi-line truncation with ellipsis are discussed here: http://css-tricks.com/line-clampin/

唯一的跨浏览器解决方案是使用 js afaik。这里讨论了使用省略号进行多行截断问题的几种解决方案：http: //css-tricks.com/line-clampin/

I hate them all, but welcome to web development.

我讨厌他们，但欢迎来到 Web 开发。

回答by Vipin

Try using this CSS

尝试使用这个 CSS

.line-clamp:after {
background: linear-gradient(to right, rgba(255, 255, 255, 0), #FFFFFF 50%) repeat scroll 0 0 rgba(0, 0, 0, 0);
bottom: 0;
content: "...";
font-weight: bold;
padding: 0 20px 1px 45px;
position: absolute;
right: 0;}

.line-clamp {
height: 5.6em;
line-height: 1.4em;
overflow: hidden;
position: relative;}

回答by Sebastian Zartner

The CSS Overflow Level 3 specification defines a standard line-clampproperty (without the quirks the ′-webkit-` prefixed solution has). Unfortunately, non of the main browsers supports this feature yet.

CSS Overflow Level 3 规范定义了一个标准line-clamp属性（没有'-webkit-` 前缀的解决方案所具有的怪癖）。不幸的是，尚无主要浏览器支持此功能。

So, for now you will have to use a polyfill for browsers that don't support this property. CSS-Tricks describes three solutions, each one having its pros and cons.

因此，现在您将不得不为不支持此属性的浏览器使用 polyfill。CSS-Tricks 描述了三种解决方案，每一种都有其优点和缺点。

1. Using standard CSS

   .fade {
     position: relative;
     height: 3.6em; /* exactly three lines */
   }
   
   .fade::after {
     content: "";
     text-align: right;
     position: absolute;
     bottom: 0;
     right: 0;
     width: 70%;
     height: 1.2em;
     background:
       linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
   }
   

   Pros: All current browsers support this. Cons: There's a fade-out instead of an ellipsis and requires heights to be set manually.

2. Using Opera's -o-ellipsis-lastlinevalue

   .last-line {
     height: 3.6em; /* exactly three lines */
     text-overflow: -o-ellipsis-lastline;
   }
   

   Pros: Display as expected. Cons: Only works in old versions of Opera and requires height to be set manually

3. Using JavaScript (Clamp.js)

   var module = document.getElementById("clamp-this-module");
   $clamp(module, {clamp: 3});
   

   Pros: Display as expected and is flexible through different options. Cons: Requires a JS library to work and is less performant than CSS solutions.

1. 使用标准 CSS

   .fade {
     position: relative;
     height: 3.6em; /* exactly three lines */
   }
   
   .fade::after {
     content: "";
     text-align: right;
     position: absolute;
     bottom: 0;
     right: 0;
     width: 70%;
     height: 1.2em;
     background:
       linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
   }
   

   优点：目前所有的浏览器都支持这一点。缺点：有一个淡出而不是省略号，需要手动设置高度。

2. 使用 Opera 的-o-ellipsis-lastline值

   .last-line {
     height: 3.6em; /* exactly three lines */
     text-overflow: -o-ellipsis-lastline;
   }
   

   优点：按预期显示。缺点：仅适用于旧版本的 Opera 并且需要手动设置高度

3. 使用 JavaScript ( Clamp.js)

   var module = document.getElementById("clamp-this-module");
   $clamp(module, {clamp: 3});
   

   优点：按预期显示并且通过不同的选项灵活。缺点：需要 JS 库才能工作，并且性能不如 CSS 解决方案。

回答by Alex

It's worth noting that as of late 2019 the original premise of this question – i.e. that the -webkit-line-clampis obsolete –?may no longer be true.

值得注意的是，截至 2019 年底，这个问题的原始前提——即-webkit-line-clamp已经过时——可能不再成立。

According to Elad's article, both Edge and Firefox have introduced support for the rather useful -webkitsyntax, making it the closest thing we'll have to a standard. To me, the chances of Microsoft and Firefox ever being pragmatic enough to support the webkit prefix seems remote. However, now that they have, I'd expect it to remain for the foreseeable future.

根据Elad 的文章，Edge 和 Firefox 都引入了对相当有用的-webkit语法的支持，使其成为我们最接近标准的东西。对我来说，微软和 Firefox 足够务实以支持 webkit 前缀的可能性似乎很小。但是，既然他们已经这样做了，我希望它在可预见的未来仍然存在。

I haven't tested it extensively on Edge yet, but it's rock-solid on Safari, Chrome and Firefox –?though you should avoid padding-bottom.

我还没有在 Edge 上对其进行过广泛的测试，但它在 Safari、Chrome 和 Firefox 上非常可靠——尽管你应该避免使用 padding-bottom。