28

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

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

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

我的问题是：

如何在纯 CSS 中实现线钳制并且没有过时的'-webkit-line-clamp'技巧？

4

4 回答 4

30

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

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

于 2013-10-10T23:26:44.443 回答
8

尝试使用这个 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;}
于 2014-02-13T07:51:55.477 回答
5

CSS 溢出级别 3 规范定义了一个标准line-clamp属性（没有 ´-webkit-` 前缀解决方案的怪癖）。不幸的是，目前还没有主流浏览器支持此功能。

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

  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 解决方案。

于 2018-10-26T12:18:49.607 回答
3

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

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

我还没有在 Edge 上对它进行过广泛的测试，但它在 Safari、Chrome 和 Firefox 上是坚如磐石的——尽管你应该避免使用 padding-bottom。

于 2020-03-19T00:30:13.397 回答