在过去的美好时光里,webkit 中存在一个使用纯 css 夹紧线条的技巧:
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
尽管这种语法与语法愉快地共存,但display: -webkit-flex
在所有基于 webkit 的现代浏览器中,它被认为是过时的。
我的问题是:
如何在纯 CSS 中实现线钳制并且没有过时的'-webkit-line-clamp'
技巧?
唯一的跨浏览器解决方案是使用 js afaik。这里讨论了用省略号进行多行截断问题的几种解决方案:http: //css-tricks.com/line-clampin/
我讨厌他们所有人,但欢迎来到 Web 开发。
尝试使用这个 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;}
CSS 溢出级别 3 规范定义了一个标准line-clamp
属性(没有 ´-webkit-` 前缀解决方案的怪癖)。不幸的是,目前还没有主流浏览器支持此功能。
因此,现在您必须为不支持此属性的浏览器使用 polyfill。CSS-Tricks 描述了三种解决方案,每一种都有其优缺点。
使用标准 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 解决方案。
值得注意的是,截至 2019 年底,这个问题的原始前提——即-webkit-line-clamp
已经过时——可能不再正确。
根据Elad 的文章,Edge 和 Firefox 都引入了对相当有用的-webkit
语法的支持,使其成为最接近标准的东西。对我来说,微软和 Firefox 足够务实以支持 webkit 前缀的机会似乎很渺茫。但是,现在他们有了,我希望它在可预见的未来仍然存在。
我还没有在 Edge 上对它进行过广泛的测试,但它在 Safari、Chrome 和 Firefox 上是坚如磐石的——尽管你应该避免使用 padding-bottom。