<返回更多

CSS中完美掌握多行文本修剪技巧

2023-07-28  微信公众号  大迁世界
加入收藏
这篇文章深入讨论了在css中裁剪多行文本的方法,以提高网页的外观和用户体验。作者首先介绍了常见的CSS文本裁剪技术,例如使用text-overflow和overflow属性。然后,他引入了新的CSS属性line-clamp,它可以更轻松地裁剪多行文本并添加省略号。作者解释了如何使用line-clamp属性设置最大行数,并指出了一些需要注意的注意事项。

AICube 开放GPT-4给大家使用以及AI工具助手,可以简化大家生图的的prompt

这篇文章深入讨论了在CSS中裁剪多行文本的方法,以提高网页的外观和用户体验。作者首先介绍了常见的CSS文本裁剪技术,例如使用text-overflow和overflow属性。然后,他引入了新的CSS属性line-clamp,它可以更轻松地裁剪多行文本并添加省略号。作者解释了如何使用line-clamp属性设置最大行数,并指出了一些需要注意的注意事项。

接下来,作者提供了一些使用line-clamp属性时可能遇到的限制和兼容性问题,并分享了一种使用JAVAScript 库进行文本裁剪的替代方法。他详细介绍了如何使用该库来自动裁剪多行文本,并为读者提供了示例代码和演示。

下面是正文~~~

在Web 开发中,CSS中的文本裁剪一直是一个问题。直到几年前,裁剪文本只能通过服务器端语言或JavaScript来完成,因为CSS没有文本裁剪功能。

单行裁剪

在2007年,第一个支持使用CSS 裁剪 文本的浏览器是Inte.NET Explorer 7(当时IE是主流浏览器),它使用了 text-overflow: ellipsis; 属性。该属性使得文本的一行可以被修剪,这在修剪网页文本方面是一个小的改进。

h1{
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

使用 Flexbox 模块的第一个版本进行多行裁剪

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*/

Line-Clamp 重获新生

在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 非常简单:

.content p{   
   display: -webkit-box;   
   -webkit-line-clamp: 3;   
   -webkit-box-orient: vertical;     
   overflow: hidden; 
}

使用 Sass Mixin 结合旧方法和新方法

现在我们有两种通过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 不起作用,它只是不会修剪文本。这种回退对于不支持的浏览器已经足够好了。

本文转载自微信公众号「大迁世界」,可以通过以下二维码关注。转载本文请联系大迁世界公众号。

声明:本站部分内容来自互联网,如有版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
▍相关推荐
更多资讯 >>>