常用的css样式

最新推荐文章于 2025-05-18 15:46:50 发布

以前是少年

最新推荐文章于 2025-05-18 15:46:50 发布

阅读量196

点赞数

分类专栏：前端文章标签： css 前端 html

本文链接：https://blog.youkuaiyun.com/qq_38061677/article/details/125767641

版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用CSS和JavaScript实现单行、两行和三行文本溢出的隐藏效果，包括`.ellipsis`, `.clamp-2`, `.clamp-3`的代码示例，帮助开发者解决多行文本展示问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文字溢出处理

* 单行文本溢出 */
.ellipsis{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* 2行文本溢出 */
.clamp-2{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
/* 3行文本溢出 */
.clamp-3{
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}