夹紧线没有'-webkit-line-clamp'

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 溢出级别 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 解决方案。