Question

在过去的好时光中，webkit中存在使用纯css来压缩线的技巧：

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

虽然这种语法很乐意与display: -webkit-flex语法共存，但在所有基于webkit的现代浏览器中，它都被认为是过时的。

我的问题是：

如何在纯CSS中实现行绑定并且没有过时的'-webkit-line-clamp'技巧？

Answer 1

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

我讨厌他们，但欢迎网络开发。

Answer 2

尝试使用此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;}

Answer 3

CSS Overflow Level 3规范defines a standard line-clamp属性（不带前缀-webkit-`解决方案的怪癖）。不幸的是，还没有主流浏览器支持此功能。

因此，目前，对于不支持此属性的浏览器，您将必须使用polyfill。 CSS-Tricks describes three solutions，每个人都有其优点和缺点。

使用标准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%);
}

优点：当前所有的浏览器都支持此功能。缺点：这里有淡入淡出而不是省略号，需要手动设置高度。

使用Opera的-o-ellipsis-lastline值
```
.last-line {
  height: 3.6em; /* exactly three lines */
  text-overflow: -o-ellipsis-lastline;
}
```
优点：按预期显示。缺点：仅适用于旧版Opera，并且需要手动设置高度
使用JavaScript（Clamp.js）
```
var module = document.getElementById("clamp-this-module");
$clamp(module, {clamp: 3});
```
优点：显示预期，并通过不同的选项灵活显示。缺点：需要一个JS库才能工作，并且性能不如CSS解决方案。

Answer 4

值得注意的是，截至2019年末，此问题的原始前提是-webkit-line-clamp已过时–可能不再成立。

根据Elad's article，Edge和Firefox都引入了对相当有用的-webkit语法的支持，这使其成为我们最接近标准的东西。在我看来，Microsoft和Firefox足够实用以支持webkit前缀的机会似乎很少。但是，既然他们已经拥有了，我希望在可预见的将来仍将保留它。

我还没有在Edge上对其进行广泛的测试，但是它在Safari，Chrome和Firefox上都是坚如磐石的-尽管您应该避免从底部开始。

夹紧线没有＆＃39; -webkit-line-clamp＆＃39;

4 个答案: