【最简单】CSS单行多行文字超出隐藏并显示省略号

刃星辰

已于 2023-09-22 16:29:24 修改

阅读量350

点赞数

分类专栏：笔记文章标签： uni-app 前端 html css

于 2023-09-06 14:09:07 首次发布

本文链接：https://blog.youkuaiyun.com/qq_33522195/article/details/132713964

版权

笔记专栏收录该内容

5 篇文章

订阅专栏

该篇文章介绍了如何使用CSS的`overflow`,`-webkit-box`,和`-webkit-line-clamp`属性来控制单行或多行文本的显示，当内容超过容器高度时实现自动截断并添加省略号。

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

单行显示文本：

.item {
	overflow: hidden;/* 超出部分隐藏 */
	display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
	-webkit-box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式 */
	-webkit-line-clamp: 1; /* 允许盒子显示几行 */
	}

多行显示文本：

.item {
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;	/* 想第几行显示省略号就写对应的行数 */
	-webkit-box-orient: vertical;
	}