css的line-clamp属性是什么？如何使用？

line-clamp 在当前规范的草案中可以接受以下值：

none：在行数上没有设置最大值，因此不会发生截断。

<integer>：设置截断内容之前的最大行数，然后在最后一行的末尾显示省略号（...）。

该省略号应呈现为Unicode字符（U + 2026），但可以由基于所使用的用户代理的内容语言和写入模式的等效项替换。

那么就有人会问了，我们不可以使用text-overflow属性（文字溢出）来实现文字的截取吗？

text-overflow确实有一个会截断文本的值：ellipsis，我们来看看效果

css代码：

.truncate {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
可以看出，text-overflow是可以实现文字的截取，但是，它是在第一行引入省略号；如果我们想在某处截取文字，比如第三行文本呢？
这时就是line-clamp发挥作用的地方了。
下面我们来看看line-clamp属性的兼容性
对于无法支持的浏览器，我们可以使用JavaScript来实现效果。
JavaScript代码，Clamp.js的下载地址：https://github.com/josephschmitt/Clamp.js
总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。
以上就是css的line-clamp属性是什么？如何使用？的详细内容，更多请关注php中文网其它相关文章！
				
				

					
微信
					
分享
				

网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



  
关键词：css的line-clamp属性是啥？如何运用？