没有'-webkit-line-clamp'的夹紧线答案

【问题标题】：Clamping lines without '-webkit-line-clamp'没有'-webkit-line-clamp'的夹紧线
【发布时间】：2013-09-16 19:08:38
【问题描述】：

在过去的好日子里，webkit 中存在一个使用纯 css 夹线的技巧：

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

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

我的问题是：

我怎样才能在纯 CSS 中实现线钳制，并且不使用过时的 '-webkit-line-clamp' 技巧？

【问题讨论】：

你需要它是一个弹性容器并且被夹在3行吗？或者只是被限制在 3 行？ line-clamp 属性是 Webkit 专有的东西，与 Flexbox 规范无关。它恰好只适用于具有 box 显示属性的元素。
@cimmanon，好点，已编辑我的问题以使其更清晰。
唯一的跨浏览器解决方案是使用 js afaik。这里讨论了使用省略号的多行截断问题的几种解决方案：css-tricks.com/line-clampin我讨厌它们，但欢迎来到 Web 开发。
如何摆脱-webkit？等到它成为一个完全适应的标准并喝茶（同时只使用-webkit，每个人都应该使用chrome）
是否有官方声明-webkit-line-clamp 已过时？

标签： css webkit flexbox

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

在codepen.io/alfred3x/pen/EXpBra?editors=1100 试过这个。两个问题： 1-省略号有时离文本很远。 2- 如果文本确实合适，省略号仍会出现。所以，我想我仍然需要一个 JS 解决方案。

【解决方案4】：

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

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

【讨论】：