AICube 开放GPT-4给大家使用以及AI工具助手，可以简化大家生图的的prompt
(资料图片仅供参考)
这篇文章深入讨论了在CSS中裁剪多行文本的方法，以提高网页的外观和用户体验。作者首先介绍了常见的CSS文本裁剪技术，例如使用text-overflow和overflow属性。然后，他引入了新的CSS属性line-clamp，它可以更轻松地裁剪多行文本并添加省略号。作者解释了如何使用line-clamp属性设置最大行数，并指出了一些需要注意的注意事项。
接下来，作者提供了一些使用line-clamp属性时可能遇到的限制和兼容性问题，并分享了一种使用JavaScript 库进行文本裁剪的替代方法。他详细介绍了如何使用该库来自动裁剪多行文本，并为读者提供了示例代码和演示。
下面是正文~~~
在Web 开发中，CSS中的文本裁剪一直是一个问题。直到几年前，裁剪文本只能通过服务器端语言或JavaScript来完成，因为CSS没有文本裁剪功能。
单行裁剪在2007年，第一个支持使用CSS 裁剪 文本的浏览器是Internet Explorer 7（当时IE是主流浏览器），它使用了text-overflow: ellipsis;属性。该属性使得文本的一行可以被修剪，这在修剪网页文本方面是一个小的改进。
h1{ text-overflow: ellipsis; white-space: nowrap; overflow: hidden;}2012年，随着Chrome中第一次实现CSS Flexbox，第一次支持多行文本修剪。它看起来很有前途，我们网页开发人员认为这是不再需要服务器端或JavaScript操作来修剪多行段落的开始。
.line-clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }但是这种喜悦很快就消失了。CSS Flexbox 模块更新了两次，之后就没有留下任何多行特性的痕迹，这个特性是在 CSS Flexbox 的第一次实现中引入的。
对于许多开发者 - 包括我在内 - 他们正在使用这个功能，这个功能只被一个旧的非官方CSS模块支持，这些更新感觉就像是多行修剪功能的死亡。
CSS flexbox版本的历史：
display: box; /* old syntax from 2009 */display: flexbox; /* unofficial syntax from 2011 */display: flex; /* official 2013 syntax*/在2015年7月，Edge浏览器决定支持line-clamp功能，使用-webkit前缀，这是旧的CSS Flexbox模块中的语法。非常不寻常的是，微软浏览器使用了-webkit前缀，这通常只用于Webkit浏览器， 如Chrome / Safari和Opera。
2019年7月，它再次发生了！这次是Firefox浏览器决定支持此功能。同样，以同样不寻常的方式。
IE，Firefox使用了旧的Flexbox模块和-webkit前缀。
这两个主要的浏览器，使用两个不同的浏览器引擎——Mozilla的Moz和Microsoft的Edge，决定使用一个Webkit浏览器的旧功能。
绝望的时刻需要不择手段，由于使用–webkit前缀是支持此功能的官方方式最接近的方式，因此他们做出了这个激动人心的决定。
非官方的行数限制现在成为官方的了主流浏览器如Firefox和Edge开始支持非官方的line-clamp功能，这意味着这个功能已经成为常态。
使用line-clamp非常简单：
在文本容器上定义旧的 CSS Flexbox 属性display: -webkit-box。使用以下方法定义要显示的文本行数-webkit-line-clamp: 3。将旧的flex-direction属性从旧的 flexbox 添加-webkit-box-orient: vertical。使用overflow: hidden;属性定义元素。.content p{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }现在我们有两种通过CSS修剪文本的方法：省略号方法仅适用于单行文本，而line-clamp属性适用于多行文本修剪。
如果可能的话，我更喜欢使用省略号这种旧的方式，因为它更接近 CSS 中的官方方式。
鉴于此，我创建了一个@mixin，它通过接受一个整数的可选参数来同时针对单行修剪和多行修剪。
如果mixin传递了一个数字，它将使用多行clamp方法。如果它没有收到任何参数，它将使用带省略号的单行trim方法。这是一个重载函数:
@mixin trim($numLines: null){ @if $numLines != null { display:-webkit-box; -webkit-line-clamp:$numLines; -webkit-box-orient:vertical; overflow:hidden; } @else{ text-overflow:ellipsis; white-space:nowrap; overflow:hidden; display:block; }}我们可以以两种不同的方式使用这个mixin：
.foo{ @include trim; /*will use the ellipsis = else result*/}.bar{ @include trim(3); /*will use the line-clamp = if result*/}事例地址：https://codepen.io/elad2412/pen/Poovzzb
.foo和.bar类的示例结果：
行数限制的浏览器支持浏览器支持非常广泛，几乎覆盖了全球95%的浏览器。如果在浏览器中line-clamp不起作用，它只是不会修剪文本。这种回退对于不支持的浏览器已经足够好了。
本文转载自微信公众号「大迁世界」，可以通过以下二维码关注。转载本文请联系大迁世界公众号。
关键词：
