Css单行或多行文本超出隐藏并显示省略号

丨真的好想睡丨

已于 2025-05-30 11:07:55 修改

阅读量524

点赞数 19

文章标签： css 前端 html css3

于 2025-05-29 22:26:32 首次发布

本文链接：https://blog.csdn.net/2301_81416889/article/details/148319027

版权

单行文本超出隐藏并显示省略号

	.a {
			/*文本不换行*/
			white-space: nowrap;
			overflow: hidden;
			/*显示省略号*/
			text-overflow: ellipsis;
		}

多行文本超出隐藏并显示省略号

	.b {
			/*这个标签作为弹性伸缩盒子模型展示。*/
			display: -webkit-box;
			/*设置元素的排列方式为纵向*/
			-webkit-box-orient: vertical;
			/*你要显示的行数*/
			-webkit-line-clamp: 3;
			overflow: hidden;
			/*显示省略号*/
			text-overflow: ellipsis;
		}